vertical-align: middle with Bootstrap 2

问题

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.

回答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).

回答2:

Try removing the float attribute from span6:

{ float:none !important; }

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

回答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>

回答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>

来源：https://stackoverflow.com/questions/11592306/vertical-align-middle-with-bootstrap-2

标签

html

css

html5

twitter-bootstrap-2