STU网页作业

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

更新时间:5个月前   文章分类:网页技术课堂

图像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;

}


STU网页公众号

STU网页设计(STU-WORKS)专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生网页成品免费下载...

qq code back_top

微信扫码咨询