CSS如何让图片在文章内容中自动居中

发布时间:2022-03-05 13:56:18 作者:小新
来源:亿速云 阅读:243

小编给大家分享一下CSS如何让图片在文章内容中自动居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

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

补充CSS知识点:

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

简单点:

在原有的控制图像的样式中增加: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;

}

以上是“CSS如何让图片在文章内容中自动居中”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 如何在css中实现图片在div中垂直居中
  2. css中怎么让img图片居中

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:Html5如何实现Canvas动画基础碰撞检测

下一篇:如何使用html5 canvas实现图片玻璃碎片特效

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》