Question

我使用bootstrap。 bootstrap是否有选择器将文本放在div的中间而不是顶部？

你可以看到Create user accounts for your staff位于顶部，应该在中间排列一个按钮。

如何在bootstrap中执行此操作？

<div class="row">
    <div class="col-md-8">
        Create user accounts for your staff.
    </div>
    <div class="col-md-4">
        <div class="clearfix">
            <div class="pull-right">
                <a class="btn btn-lg btn-primary " href="#">Add Staff</a>
            </div>
        </div>
    </div>
</div>

Answer 1

.row .col-md-4,
.row .col-md-8{
  display:inline-block;
  vertical-align:middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-vertical">
    <div class="col-md-8">
        Create user accounts for your staff.
    </div>
    <div class="col-md-4">
        <div class="clearfix">
            <div class="pull-right">
                <a class="btn btn-lg btn-primary " href="#">Add Staff</a>
            </div>
        </div>
    </div>
</div>

Answer 2

如果您具有使用flex的能力，您可以使用一些简单的CSS扩展Bootstrap以支持垂直flexbox解决方案：

.row.row-vertical {
	display: flex;
	align-items: center;
	justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-vertical">
    <div class="col-md-8">
        Create user accounts for your staff.
    </div>
    <div class="col-md-4">
        <div class="clearfix">
            <div class="pull-right">
                <a class="btn btn-lg btn-primary " href="#">Add Staff</a>
            </div>
        </div>
    </div>
</div>

注意：您可以在此处详细了解FlexBox及其支持：http://caniuse.com/#feat=flexbox

Answer 3

将这些规则添加到您的css

.col-md-8,.col-md-4{
  display:inline-block !important;
  vertical-align:middle !important;
  }
  .col-md-4{
    float:right !important
  }

明智的做法是在您的特定html元素中添加一个ID，以防止破坏引导程序并将这些css规则添加到您的ids运气中... ...

div中的垂直中间内容？

3 个答案: