Align images vertically central inside div?

Asked Aug 19 '15 at 08:50

Active Aug 19 '15 at 09:01

Viewed 24 times

I am able to horizontally center my image items inside my divs, but how do I achieve this vertically too?

Important to note the image height may vary.

li {
  float: left;
  width: 195px;
  height: 195px;
  border: 1px solid black;
  list-style-type: none
}
li div {
  text-align: center
}

<ul>

  <li>
    <div>
      <img class="logo" src="http://placehold.it/50x50" />

    </div>
  </li>


  <li>
    <div>
      <img class="logo" src="http://placehold.it/50x100" />

    </div>
  </li>

</ul>

edited Aug 19 '15 at 09:01

asked Aug 19 '15 at 08:50

michaelmcgurk

6,367
23
94
190

1

http://jsfiddle.net/7b3mu9wt/4/ – Repo Aug 19 '15 at 08:58
1

Only if you know the height of the images as you do here – Repo Aug 19 '15 at 08:59
@Repo Out of interest, if the height of the image varies, how do I achieve this same effect? – michaelmcgurk Aug 19 '15 at 09:00
1

Then you need javascript, to get the height of the image and set the div's padding-top to (heightOfDiv/2)-(heightOfImg/2) – Repo Aug 19 '15 at 09:05

Align images vertically central inside div?

0 Answers0