html - 将文本垂直对齐到我的列 div 的中间

Question

我想将行内的文本垂直居中对齐。您会看到我的页面上有一个 lg 列。我在 block 引用中的文本默认为顶部或上部垂直对齐。添加如下所示的单个样式属性似乎无法解决问题。我需要使用 CSS 并链接到它吗？

<div class='nav-wrapper container'>
        <div class='row'>
            <div class="col-lg-12" style="vertical-align:bottom">
                <center>
                    <blockquote cite="https://www.brainyquote.com/quotes/quotes/h/hippocrate133222.html">
                        <i>Healing is a matter of time, but it is sometimes a matter of opportunity.</i>
                    </blockquote>
                </center>
            </div>
        </div>

Answer 1

拯救你自己!如果您不熟悉 HTML，请不要使用 bootstrap!你仍然可以毫发无损地离开... + <center>标签不受支持且已弃用。一开始它总是水平的。大约有 6 种居中方式，它们都有各自的最佳用例。您不能使用内联 block 类型规则，如 vertical align在“ block ”级元素上。

这里有两种方法。我敢打赌，您只需要以不同的方式考虑填充。

.padding-style {
  border: 1px solid blue;
  text-align: center;
  padding: 40px 0; /* top/bottom   left/right */
}

.flexbox-style {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px; /* arbitrary height */
}

h1 {
  display: inline-block;
  border: 1px solid green;
}

<section class='padding-style'>
  <h1>centered thing</h1>
</section>

<section class='flexbox-style'>
  <h1>centered thing</h1>
</section>