Search code examples
twitter-bootstrap-3valign

Keeping floating span valign middle

I have tried a lot to keep a span valign middle. At the moment it looks like:

enter image description here

But I want that:

enter image description here

Here you can play around: Link

Solution 

  • .wrapper{
  display:table-row;
}

.image-left{
  width:50px;
  height:50px;
  background-color:grey;
  }

.text-block{
  display:table-cell;
  vertical-align:middle;
}
    <div class="wrapper">
  <div class="image-left">
  </div>
  <div class="text-block">
    <span>One does not simply css.</span>
  </div>
</div>

    Whenever I need to align text, I tend to use display: table-cell with vertical-align:middle on the parent element of the span or the div where the text is inside.

    But there are literally tons of ways to achieve this. I suggest you google a bit and see which one fits best in your situation. I just prefer table-cells since they auto adjust to all content in the row, and look clean.

    Detailed info: http://phrogz.net/css/vertical-align/

    Your link didnt work btw.