vertical-align：middle与Bootstrap 2 [英] vertical-align: middle with Bootstrap 2

问题描述

我使用twitter的引导程序，我想将一个 div 块与一个图片和右边的文本对齐。

这是代码：

 < ol class =rowid =possibilities> 
< li class =span6> 
< div class =row> 
< div class =span3> 
< p>一些文字在这里< / p> 
< p>文字这里太< / p> 
< / div> 
< figure class =span3>< img src =img / screenshots / options.pngalt =Some text/>< / figure& 
< / div> 
< / li> 
< li class =span6> 
< div class =row> 
< figure class =span3>< img src =img / qrcode.pngalt =Some text/>< / figure& 
< div class =span3> 
< p>一些文字< / p> 
< p>还有一些文字。< / p> 
< / div> 
< / div> 
< / li> 
< / ol> 
  

我试过，但不是wortks：

  .span6 .row {display：table;} 
 .span6 .row .span3，.span6 .row figure {display：table-cell; vertical-align：middle;} 
  

我也尝试过：

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

有人有一个想法吗？
提前感谢。

b p $ p> .row> .span3 {
display：inline-block！important;
vertical-align：middle！important;
}


编辑：

小提琴： http://jsfiddle.net/EexYE/

您可能需要添加Diego的 float：none！important; 也是如果span3是浮动的，它会干扰。

小提琴： http://jsfiddle.net/D8McR/

响应Alberto：如果你固定行div的高度，然后继续垂直中心对齐，你需要设置行的行高为与行的像素高度相同（即，在您的情况下，两者都为300像素）。如果你这样做，你会注意到子元素继承line-height，这是一个问题在这种情况下，所以你需要设置你的行高度为span3s实际上是什么（1.5是示例值在小提琴，或1.5 x的字体大小，我们没有改变，当我们改变line-height）。

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.

解决方案

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

这篇关于vertical-align：middle与Bootstrap 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！