引导程序将内容垂直对齐在中间

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

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

尝试使用这个，这是可行的，但我们需要给出跨度的高度。

就像下面一样：-

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

你可以试试这个：

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

使用<center>将文本居中，使用属性align设置为center的<div>标记也将执行相同操作。如果您希望元素在页面中居中，那么使用<table>应该可以（jsfiddle）：

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

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

相关内容

最新更新

热门标签：