使用css让图片居中

今天做作业遇到一个需要将图片居中的，我直接在img标签里顺手写下了align="center",发现图片并没有居中，这才想起img里的align是和文字的相对位置关系。

既然html属性用不了，就试试用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>

 多谢1楼 ☑傻瓜小Yǚ 提醒img默认是行内元素，行内元素水平居中请大家果断无视掉我上面的代码（只是用一个很奇葩的方法实现了一个原本不应该那样实现的形式）

<style type="text/css">
    div{
        text-align:center；
   }
</style>

行内元素水平居中使用text-align:center就可以了，我之前一直以为text-center只能让文字居中呢

我就这样积累了一个小技巧，于是就赶紧记下来了

ps：经测试这种方法在火狐和谷歌浏览器中展现很好，而IE低版本不买账。求解决方法

学习中ing，大家发现有我的理解有什么问题，欢迎大家指出啦~~一起进步啊~~~