Jekyll博文图片居中

在写jekyll博文时,发现写出的文章里图片都是居左的,不是很美观,为了使图片居中,试过了text-align,发现不好使,网上搜寻找到了有效的办法。

当然此种居中方法适用于大部分css样式配置,不仅局限于jekyll博文。

对齐方式的等效代码

/* Alignment */ 
.alignleft { 
display: inline; 
float: left; 
} 
.alignright { 
display: inline; 
float: right; 
} 
.aligncenter { 
clear: both; 
display: block; 
margin:auto; 
} 

修改_layout.scss文件

修改jekyll目录中_sass下的 _ layout.scss文件

可以找到对应博文的样式设置代码,在post-cotent{}块中添加img项的配置即可,借鉴上述居中代码,如下:

img {
    clear: both; 
    display: block; 
    margin:auto; 
}

如果开着jekyll serve本地服务的话,保存后,能立即访问127.0.0.1:4000,查看自己的博客网站,随便查看一篇博文就能看到,图片居中了,就像下面图片的效果:

1

附:

从上面可以看到,配置我们文章的样式的话,就是添加或修改_sass下的 _layout.scss文件的post-cotent{}里的代码,我还修改了表格的样式

  • 代码:

    table {
        border-collapse:collapse;
        margin:8px auto 16px auto;
        width:100%;
    }
    th, td {
        border: 1px solid #828282;
        padding: 8px;
    }
    
  • 效果就像下面的表格:

后缀名 说明
zip zip程序打包压缩的文件
rar rar程序压缩的文件
7z 7zip程序压缩的文件
tar tar程序打包,未压缩的文件
gz gzip程序压缩的文件
xz xz程序压缩的文件
bz2 bzip2程序压缩的文件
tar.gz tar打包,gzip程序压缩的文件
tar.xz tar打包,xz程序压缩的文件
tar.bz2 tar打包,bzip2程序压缩的文件
tar.7z tar打包,7zip程序压缩的文件

其他的元素的样式同样可以在post-content里配置。


jekyll

644 字

2015-10-15 17:34 +0800