How to properly float this image vertically aligned?

Question

This is the standard code I use to align elements vertically inside the parent element:

HTML

<div id="header">
    <img src="http://cdn.flaticon.com/png/256/60510.png" />
</div>

CSS

#header{
    border: 1px solid red;
    height: 30px;
}

img{
    height:20px;
    vertical-align: middle;
}

#header:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

http://jsfiddle.net/uvpfedt6/

It works OK but when I want to float the img to the right with float:right, the img is not vertically aligned anymore.

http://jsfiddle.net/uvpfedt6/1/

How should I modify my code to align the floated img vertically?

possible duplicate of [How to vertically align an image inside div](http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div) — Stratus3D, Jan 06 '15 at 21:19
Why don't you just add `text-align:right;` to `#header`? it will keep the vertical centering but provide the right alignment you want, no `float` needed. — PlantTheIdea, Jan 06 '15 at 21:20

score 1 · Answer 1 · answered Jan 06 '15 at 21:21

The float property makes you lose the vertical-align property.

You will have to correct this with a margin for example :

img {
    height: 20px;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}

See update Fiddle : http://jsfiddle.net/uvpfedt6/2/

score 1 · Answer 2 · answered Jan 06 '15 at 21:22

Instead of all the floating and pseudo elements, why not just use positioning? Positioning the parent relatively and the image absolutely:

#header {
    border: 1px solid red;
    height: 30px;
    position:relative;
}
img {
    height:20px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}

<div id="header">
    <img src="http://cdn.flaticon.com/png/256/60510.png" />
</div>

score 1 · Answer 3 · answered Jan 06 '15 at 21:23

vertical-align: middle only applies to inline level or table-cell elements.

Use transform: translateY(-50%) and top: 50% instead.

Updated Fiddle

#header {
  border: 1px solid red;
  height: 30px;
}
img {
  position: relative;
  height: 20px;
  float: right;
  top: 50%;
  transform: translateY(-50%);
}
#header:before, .frame_before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

<div id="header">
  <img src="http://cdn.flaticon.com/png/256/60510.png" />
</div>

score 1 · Answer 4 · answered Jan 06 '15 at 21:26

You ca use margin

#header {
  border: 1px solid red;
  height: 30px;
}
img {
  position: relative;
  height: 20px;
  float: right;
  top: 50%;
  margin-top: -10px;
}
#header:before,
.frame_before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

<div id="header">
    <img src="http://cdn.flaticon.com/png/256/60510.png" />
</div>

score 1 · Accepted Answer · answered Jan 06 '15 at 21:31

Instead of float:right, use text-align:right in your div.

#header{
border: 1px solid red;
height: 30px;
text-align:right;
}

img{
height:20px;
vertical-align: middle;

}

#header:before,
.frame_before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}

How to properly float this image vertically aligned?

5 Answers5