Question

如何垂直对齐列中间的内容？这是我的jsffidle，我希望左栏中的文字在列的中心垂直对齐是否有一类特殊的引导程序？

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

Answer 1

尝试使用它，这将有效，但我们需要给出该跨度的高度。

如下所示： -

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

Answer 2

你可以试试这个：

.row {
    display: table;
}

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

Answer 3

使用<center>会使文字居中，并且使用设置为<div>的属性align的{{1}}标记也会这样做。如果您希望元素在页面中居中，请使用center should work (jsfiddle)：

<table>

Answer 4

带有一些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());            
    });
});

bootstrap在中间垂直对齐内容

4 个答案: