集中img元素系列

Question

无法想象如何将这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

Answer 1

您只需为text-align: center

添加#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以查看演示。