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    lt ol class  row  id  possibilities  gt        lt li class  span6  gt            lt div class  row  gt                lt div class  span3  gt                    lt p gt some text here lt  p gt                    lt p gt Text Here too lt  p gt                lt  div gt                lt figure class  span3  gt  lt img src  img screenshots options png  alt  Some text    gt  lt  figure gt            lt  div gt        lt  li gt        lt li class  span6  gt            lt div class  row  gt                lt figure class  span3  gt  lt img src  img qrcode png  alt  Some text    gt  lt  figure gt                lt div class  span3  gt                    lt p gt Some text lt  p gt                    lt p gt Some text here too  lt  p gt                lt  div gt            lt  div gt        lt  li gt   lt  ol gt    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

User · Answer

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>

User · Answer

Try this    row  gt   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

User · Answer

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

User · Answer

i use this    lt style gt  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    lt  style gt   lt body gt   lt div class  container-fluid  gt        lt div class  row-fluid  gt        lt div class  offset3 span6 centering  gt              content here           lt  div gt       lt  div gt    lt  div gt   lt  body gt

User · Answer

Try removing the float attribute from span6     float none  important

[css] vertical-align: middle with Bootstrap 2

Examples related to css

Examples related to html

Examples related to twitter-bootstrap-2