vertical-align: middle with Bootstrap 2

Question

I use the twitter bootstrap and I wanted to align verticaly a div block with a picture and the text at the right.

Here is the code:

<ol class="row" id="possibilities">
     <li class="span6">
         <div class="row">
             <div class="span3">
                 <p>some text here</p>
                 <p>Text Here too</p>
             </div>
             <figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
         </div>
     </li>
     <li class="span6">
         <div class="row">
             <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
             <div class="span3">
                 <p>Some text</p>
                 <p>Some text here too.</p>
             </div>
         </div>
     </li>
</ol>

I tried this but not wortks:

.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}

I tried this too:

.span6 .row .span3{display: inline-block; vertical-align: middle;}

None is working. Does somebody have an idea? Thanks in advance.

Bronchia

Can you make a jsfiddle.net demo? – Inexperienced

Including the twitter bootstrap makes crash jsfiddle... sorry – Bronchia

"makes jsfiddle crash" is a nebulous statement. – Inexperienced

This is one way of working around a bootstrap include issue in jsFiddle: jsfiddle.net/api/post/library/pure – Inexperienced

So... jsfiddle.net/kwBuW? – Inexperienced

I didn't see the checkbox for the bootstraps sorry... i was using copy/paste... For my problem, CSS code that I have given works well without bootstrap. I think this is a problem with .spanN classes and .row because there is before or after content with the display: table property (lines 437, 443, 183 in the bootstrap). Sorry for my bad english... – Bronchia

try display:table-cell; – Duggins

Answer 1

Try this:

.row > .span3 {
    display: inline-block !important;
    vertical-align: middle !important;
}

Edit:

Fiddle: http://jsfiddle.net/EexYE/

You may need to add Diego's float: none !important; also if span3 is floating and it interferes.

Edit:

Fiddle: http://jsfiddle.net/D8McR/

In response to Alberto: if you fix the height of the row div, then to continue the vertical center alignment you'll need to set the line-height of the row to be the same as the pixel height of the row (ie. both to 300px in your case). If you'll do that you will notice that the child elements inherit the line-height, which is a problem in this case, so you will then need to set your line height for the span3s to whatever it should actually be (1.5 is the example value in the fiddle, or 1.5 x the font-size, which we did not change when we changed the line-height).

Bernadettebernadina

How can i get this works by setting also the height of the row div? jsfiddle.net/EexYE/191 – Escalator

@AlbertoPellizzon See the additional edit to the post above. In short, you'll need to set the line-height of the row div to match the height you set, eg. both height AND line-height to 300px. Then to prevent your type and image displaying incorrectly you'll need to set the line-height of the span3s to whatever their correct value should be, otherwise it will just inherit the 300px from the row div. – Bernadettebernadina

Answer 2

Try removing the float attribute from span6:

{ float:none !important; }

Truncation

Answer 3

If I remember correctly from my own use of bootstrap, the .spanN classes are floated, which automatically makes them behave as display: block. To make display: table-cell work, you need to remove the float.

Hsining

Answer 4

As well as the previous answers are you could always use the Pull attrib as well:

---

    <ol class="row" id="possibilities">
       <li class="span6">
         <div class="row">
           <div class="span3">
             <p>some text here</p>
             <p>Text Here too</p>
           </div>
         <figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
        </div>
 </li>
 <li class="span6">
     <div class="row">
         <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
         <div class="span3">
             <p>Some text</p>
             <p>Some text here too.</p>
         </div>
     </div>
 </li>

Sonia

Answer 5

i use this

<style>
html, body{height:100%;margin:0;padding:0 0} 
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}   
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto} 
</style>
<body>
<div class="container-fluid">
     <div class="row-fluid">
     <div class="offset3 span6 centering">
            content here
         </div>
    </div>
 </div>
</body>

Typology