通过CSS实现让正文中的图片独占一行并自动居中对齐

图像img标签默认是行内样式，不会换行。如果要实现正文中的图片独占一行并自动居中对齐，就需要把文章内容中的图片样式由行内样式更换为block块级元素。

1、更换为块级元素

我们可以在原有的控制图像的样式中增加：display: block。block元素将显示为块级元素，此元素前后会带有换行符。

CSS实例：

.content img {

display: block;

}

2、设置图片居中对齐

居中用的同样是网页布局时整体居中的代码，即margin:0 auto，0可以改为任何数据，像素或EM（控制的是上下距离）；重要的是AUTO属性，因为它控制元素左右的距离，AUTO则是用于居中的属性。

CSS实例：

.content img {

margin:0 auto;

}

通过CSS实现让正文中的图片独占一行并自动居中对齐代码：

CSS实例：

.entry img {

max-width: 100%;

height: auto;

display: block;

margin: 0 auto !important;

}

经以上设置后，图像已能自动在文章内容中居中。但在实践中，如果有些页面写了行内样式，如：<img style=”margin:0;”>由于行内样式的优先（层叠）级别高于外部样式表中的图像自动居中的定义，因此刚才定义的：margin:0 auto就失效了。这种情况下给这个居中用!important指定为最优先级别即可。

CSS实例：

.entry img {

max-width: 100%;

height: auto;

display: block;

margin: 0 auto !important;

}