bootstrap垂直对齐中间的内容

如何垂直对齐中间的内容？这是我的jsffidle，我希望左列中的文本在列的中心垂直对齐是否有特殊的bootstrap类？bootstrap垂直对齐中间的内容

<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 "> 
     <span class="v-align">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</span> 
    </div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
     <img class="pull-right img-responsive" style="margin-top:10px;"src="http://lorempixel.com/1000/1000" /> 

    </div> 
</div>

来源

2015-04-04 mattia

你可以试试这个：

.row { 
    display: table; 
} 

[class*="col-"] { 
    float: none; 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2015-04-04 13:12:51 Danko

我喜欢你的解决方案，你知道，如果它是跨浏览器？ – mattia 2015-04-04 15:49:58

是的。你可以使用.col-sm-6，而不是属性选择器[class * =“col-”]。我不确定你是否需要所有的关键词，所以如果你想尝试使用.col-sm-6。如果您将此标记为“已回答”，我将不胜感激。 – Danko 2015-04-04 15:57:54

使用<center>将围绕文本，并使用<div>标签与属性align设置为center将这样做。如果你想在页面居中的元素，使用<table>should work (jsfiddle)：

<html> 
Lorem Ipsum something something. 
<table align="center"> 
    <tr><td width="20%">Hello</td></tr> 
</table> 
</html

来源

2015-04-04 12:54:52 Phantom

一些JS（需要小的响应式布局加）更多钞票的解决方案：
https://jsfiddle.net/muzd1prc/

.v-align-container{ 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 
.v-align{ 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

$(document).ready(function() { 
    $(".v-align-container img").bind('load', function(event) { 
     var $row = $(this).parents(".v-align-container:first"); 
     $row.height($row.height());    
    }); 
});

来源

2015-04-04 13:42:47 khv2online

尝试使用这个，这个 WIL我的工作，但我们需要给这个跨度的高度。

就像如下： -

<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 "> 
     <span class="v-align" style="vertical-align: middle; display: table-cell; height: 565px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</span> 
    </div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
     <img class="pull-right img-responsive" style="margin-top:10px;" src="http://lorempixel.com/1000/1000" /> 

    </div> 
</div>

来源

2015-04-04 14:38:42 Tony

bootstrap垂直对齐中间的内容

回答

相关问题