C.Ronaldo C.Ronaldo - 5 months ago 13
CSS Question

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/

Answer

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/