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垂直對齊中間的內容

回答

相關問題