Css 垂直对齐：中间与引导2对齐_Css_Html_Twitter Bootstrap 2

Css 垂直对齐：中间与引导2对齐

css html

Css 垂直对齐：中间与引导2对齐,css,html,twitter-bootstrap-2,Css,Html,Twitter Bootstrap 2,我使用twitter引导，希望将verticaly adiv块与右侧的图片和文本对齐代码如下： <ol class="row" id="possibilities"> <li class="span6"> <div class="row"> <div class="span3"> <p>some text here</p>

我使用twitter引导，希望将verticaly a

div

块与右侧的图片和文本对齐

代码如下：

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

我也试过：

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

没有人在工作。有人有主意吗？

提前感谢。

如果我自己使用引导时没有记错的话，

.spanN

类是浮动的，这会自动使它们表现为

显示：block

。要使

display:table cell

工作，您需要删除float。

尝试从span6中删除

float

属性：

{ float:none !important; }

与前面的答案一样，您也可以始终使用Pull属性：



这里有一些文字
这里也有文字


一些文本
这里也有一些文字

试试这个：

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

编辑：小提琴：

您可能需要添加迭戈的

float:none！重要的如果span3是浮动的并且存在干扰，也可以
编辑：
小提琴：
回应Alberto：如果您固定行div的高度，那么要继续垂直中心对齐，您需要将行的行高度设置为与行的像素高度相同（即，在您的情况下，两者都设置为300px）。如果这样做，您会注意到子元素继承了线条高度，这在本例中是一个问题，因此您需要将span3s的线条高度设置为实际应为的值（1.5是小提琴中的示例值，或1.5 x字体大小，我们在更改线条高度时没有更改）.
我用这个
<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>


html，正文{高度：100%；边距：0；填充：0}
.container流体{高度：100%；显示：表格；宽度：100%；右侧填充：0；左侧填充：0}
.row流体{高度：100%；显示：表格单元格；垂直对齐：中间；宽度：100%}
.居中{浮动：无；边距：0自动}
满足于此
你能做一个演示吗？包括twitter引导会使JSFIDLE崩溃。。。抱歉，“makejsfiddle-crash”是一个模糊的语句。这是解决jsfiddle中引导包含问题的一种方法：那么？如何通过设置行div的高度来实现这一点@AlbertoPellizzon请参阅以上文章的附加编辑。简而言之，您需要设置行div的行高度以匹配您设置的高度，例如，将高度和行高度都设置为300px。然后，为了防止您的类型和图像显示不正确，您需要将span3s的行高度设置为其正确值，否则它将从row div继承300px。
.row > .span3 {
    display: inline-block !important;
    vertical-align: middle !important;
}

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