Centering series of img elements

Question

Can't figure how to center these 3 img elements horizontal

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;
}

Fairly simple huh but it doesnt work! Test page

Specify div width and try to use margin: 0 auto; – Alexander Bell Dec 17 '14 at 02:24 — Alexander Bell, Dec 17 '14 at 02:24
use `text-align: center` for your `#center` – Aldi Unanto Dec 17 '14 at 02:25 — Aldi Unanto, Dec 17 '14 at 02:25

score 3 · Accepted Answer · answered Dec 17 '14 at 02:30

You just need to add text-align: center for your #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;
}

Check this link to see demo.

Centering series of img elements

1 Answers1