在使用img标签,想让图片页面居中时,使用margin属性无法生效。
原因如下:块元素可以使用margin:0 auto的方式来实现页面居中对齐。
<img src="../../../resources/image/Jay004.jpg" alt="找不到图片" width="200px">
页面显示效果如下
想要达到居中的效果,有以下几个方法
-
使用display:block将img标签变为块元素,再使用margin: 0 auto。
<style> img { border-radius: 100px; Box-shadow: 10px 10px 50px #ec9da7; display: block; margin: 0 auto; } </style>
-
用div标签将img标签包裹起来,再使用margin:0 auto 或者 text-align:center实现居中。
如果是想使用margin:0 auto的方式居中,图片会有所偏移。