CODEWITHSUNDEEP
twitter-bootstrap-3valign
fteinz
fteinz

Reputation: 1095

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

Upvotes: 0

Views: 46

Answers (1)

Olaf
Olaf

Reputation: 1122

.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.

Upvotes: 1

Related Questions