CSS技巧:让图片在文章内容中自动居中的实现代码

华哥最近调整自己的一个网站时,觉得在发布文章时,手动把图片居中,实在有些麻烦。能不能让文章内容中的图片自动居中呢?是否可以通过样式控制表来实现?

网上找了下答案,似乎有些过于复杂了。自己动手实践吧。

首先要调整的,是让图片独占一行空间。

补充CSS知识点:

图像(<img>标签)默认是行内样式(inline style),行内样式的大体意思是,它前边或后边的HTML标签元素会紧挨着排在它的前后(如影随形),不会另换一行;而像DIV标签则默认是块级元素,块级元素前后的标签元素会换行。因此需要把文章内容中的图片样式由行内样式更换为block块级元素,要不就易和文字内容纠缠在一起。

简单点:

  • block元素将显示为块级元素,此元素前后会带有换行符。
  • inline默认。元素会被显示为内联元素,元素前后没有换行符。

在原有的控制图像的样式中增加:display: block。

.entry img {

max-width: 100%;

height: auto;

display: block;

}

图像设为块级元素后,需要让图像居中。居中用的同样是网页布局时整体居中的代码,即margin:0 auto,0可以改为任何数据,像素或EM;重要的是AUTO属性,因为它控制元素左右的距离,AUTO则是用于居中的属性。

实例:

.entry img {

max-width: 100%;

height: auto;

display: block;

margin:0 auto;

}

经以上设置后,图像已能自动在文章内容中居中。但在实践中,发现一些旧的网页文章,在发布时其图像有行内样式,如:<img style=”margin:0;”>这样的。由于行内样式的优先(层叠)级别高于外部样式表中的图像自动居中的定义,因此刚才定义的:margin:0 auto就失效了。

行内样式优先级

这也不是问题,给这个居中用!important指定为最优先级别。最样使用的样式如下。

.entry img {

max-width: 100%;

height: auto;

display: block;

margin: 0 auto !important;

}

好记性不如烂笔头,记下来方便再次用。

实例应用可查看:起点通首页点任一文章内容页,或肖运华个人博客文章内容页。

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注