第一个博客-CSS 关于img标签的页面居中问题

在使用img标签,想让图片页面居中时,使用margin属性无法生效。

原因如下:块元素可以使用margin:0 auto的方式来实现页面居中对齐。

<img src="../../../resources/image/Jay004.jpg" alt="找不到图片" width="200px">
页面显示效果如下

想要达到居中的效果,有以下几个方法

  1. 使用display:block将img标签变为块元素,再使用margin: 0 auto。
    <style> img { border-radius: 100px; Box-shadow: 10px 10px 50px #ec9da7; display: block; margin: 0 auto; } </style>

  2. div标签img标签包裹起来,再使用margin:0 auto 或者 text-align:center实现居中。
    如果是想使用margin:0 auto的方式居中,图片会有所偏移。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效