Search code examples
csscentervertical-alignment

How to vertical center floated div with anchor and image

I want to center my images inside a div that is floated. I've tried vertical-align:middle; but that wasn't a success. I guess that's because it's floated.

I've created a jfiddle about my problem: https://jsfiddle.net/au0h6u0g/

Solution

  • you may use vertical-align on img and line-height, example:

    .top {
  height: 150px;
  background-color: blue;
}

.container {
  float: right;
  line-height: 150px;
}

img {
  vertical-align: middle;
}
    <div class="top">
  <div class="container">
    <a href="#">
      <img src="http://lorempixel.com/400/200/" alt="Smiley face" height="50" width="140">
    </a>
  </div>
</div>

    https://jsfiddle.net/au0h6u0g/4/