Cyclone Cyclone - 4 months ago 8
CSS Question

Is it possible to vertically align text within a div?

The code below (also available as a demo on JS Fiddle) does not position the text in the middle, as I ideally would like it to. I cannot find any way to vertically centre text in a div, even using the

margin-top
attribute. How can I do this?



<div id="column-content">
<img src="http://i.stack.imgur.com/12qzO.png">
<strong>1234</strong>
yet another text content that should be centered vertically
</div>




#column-content {
display: inline-block;
border: 1px solid red;
position:relative;
}

#column-content strong {
color: #592102;
font-size: 18px;
}

img {
margin-top:-7px;
vertical-align: middle;
}

Answer

Create a container for your text content, a span perhaps.

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}
<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

JSFiddle