Question

我有两列（col-md-4和col-md-8）col-md-4有一个h1元素，col-md-8有一个段落元素。我想要做的是让两个元素在中间对齐，我试图使用行高，但在小屏幕上有时文本在两行并且有一个巨大的间距，所以我的问题是我怎么做无论段落元素中是否有1,2或3行，都将两个元素对齐在中间。

<div class="container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h1>Heading One</h1>
                </div>
                <div class="col-md-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non risus nibh. Suspendisse vehi.</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

你可以使用神话般的matchHeight JQuery插件（可在此处下载：https://github.com/liabru/jquery-match-height）来确保两个父容器的高度相同。然后，您可以使用$foobar = 'I ate '.($bananas != '' ? $bananas : 'zero').' bananas';垂直居中每个父容器的内容。您可以在此处找到有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以向这些列添加类，并将flexbox属性添加到该类。您需要设置min-width以显示居中。

然后使用媒体查询删除它。

此代码段最好全屏查看..

.col-flex {
  display: flex;
  align-items: center;
  min-height: 200px !important;
}

.col-flex h1
.col-flex p {
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-flex">
                    <h1>Heading One</h1>
                </div>
                <div class="col-md-8 col-flex">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non risus nibh. Suspendisse vehi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non risus nibh. Suspendisse vehi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non risus nibh. Suspendisse vehi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non risus nibh. Suspendisse vehi.</p>
                </div>
            </div>
        </div>
    </div>

Answer 3

你有2个选项可以在中间对齐它们：
1. Flexbox
2. display：table / table-cell

使用表格单元格，只要你使用bootstrap你也必须用浮点数玩一下;）

here你会找到4种垂直对齐方式的例子

Bootstrap CSS使用标题

3 个答案: