居中系列的img元素[重复]答案

【问题标题】：Centering series of img elements [duplicate]居中系列的img元素[重复]
【发布时间】：2015-02-15 12:23:25
【问题描述】：

不知道如何将这 3 个 img 元素水平居中

HTML

<!-- Homepage Content -->
<div id="center">

    <img src="images/homepage/wedding.png"/>
    <img src="images/homepage/wildlife.png"/>
    <img src="images/homepage/portrait.png"/>

</div>

CSS

#center {
display:inline-block;
margin-left:auto;
margin-right:auto;
}

相当简单，但它不起作用！ Test page

【问题讨论】：

指定div宽度并尝试使用margin: 0 auto;
使用text-align: center 作为您的#center

标签： html css image centering

【解决方案1】：

您只需为您的#center 添加text-align: center

<div id="center">

   <img src="images/homepage/wedding.png"/>
   <img src="images/homepage/wildlife.png"/>
   <img src="images/homepage/portrait.png"/>

</div>

CSS

#center{
  display: block;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
}
#center img{
  display: inline;
}

查看this link 以查看演示。

【讨论】：

感谢完美！