html - 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; 将每个父容器的内容垂直居中。你可以在这里找到更多关于 flexbox 的信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/