不能将div内的2个div的内容与height auto垂直对齐

时间:2015-08-07 15:16:16

标签: html css twitter-bootstrap

我似乎无法将另一个div内的2个div的内容与height auto垂直对齐。里面的2个div使用bootstrap列。我真正想要的是将段落中的文本从第一个div /列对齐到第二个div /列的高度的中心。

<div class="project-row">
    <div class="container">
        <div class="block col-xs-6">
            <p>At vero eos et accusamus et iusto odio dignissimos qui blanditis praesentium voluptatum deleniti</p>
        </div>
        <div class="block col-xs-6">
            <img class="img-monitor" ng-src="assets/img/teamsight-monitor.png">
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

您可以像这样使用弹性框:

.container{
    display: flex;
    align-items: center;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="project-row">
    <div class="container">
        <div class="block col-xs-6">
            <p>At vero eos et accusamus et iusto odio dignissimos qui blanditis praesentium voluptatum deleniti</p>
        </div>
        <div class="block col-xs-6">
            <img class="img-monitor" src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1">
        </div>
    </div>
</div>