Bootstrap CSS用标题排列文本

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 ）来确保两个父容器的高度相同。 然后可以使用display:flex; align-items:center; display:flex; align-items:center; 使每个父容器的内容垂直居中。 您可以在此处找到有关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

U有2个选项可将它们居中对齐：
1. Flexbox
2. 显示 ：表格/表格单元格

使用表格单元格，只要您使用引导程序，您还必须使用float来玩；）

在这里，您将找到4种垂直对齐方式的示例