css图片居中的方法

发布时间:2020-06-04编辑:脚本学堂
本文介绍下,css实现图片居中的方法,不是使用algin=center的方法,而是使用margin与width相结合的方法,有需要的朋友参考下。

让图片居中,直接在img标签中使用align="center",图片并没有居中

原因:
img中的align是与文字的相对位置关系。

分享下css 居中的实现方法。

可以使用div将img嵌在其中,给div加上background-color:black的属性,看看div的区域是什么样的?

div高度和内层img高度相同,而宽是布满当前父元素(我的是body的大小),图片居左。

试着把div的款变小一点,居中没问题,使用margin:auto就可以将div居中了。
可能是因为上下自动应该还是默认间距(据观察应该是0),左右auto可以把左右空白区域填满,div就自然居中了。

只要把div的宽度设为图片的宽度即可:
 

复制代码 代码示例:
<style type="text/css">
    div{
      margin:auto;
      width:xxxpx;     
    }
</style>

说明:
img默认是行内元素,行内元素水平居中请大家果断无视掉我上面的代码(只是用一个很奇葩的方法实现了一个原本不应该那样实现的形式)
 

复制代码 代码示例:
<style type="text/css">
 div{
  text-align:center;
}
</style>
 

行内元素水平居中使用text-align:center即可。
之前一直以为text-center只能让文字居中,可叹。