Question

我想将行内的文本垂直对齐到中间。你会看到我的页面上有一个lg列。我在块引用中的文本默认为顶部或上部垂直对齐。添加单个样式属性，如下所示似乎没有解决问题。我需要使用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种方法可以集中某些东西，它们都有最好的用例。您不能在“块”级元素上使用vertical align之类的内联块类型规则。

这是两种方式。我打赌你只需要考虑不同的填充。

.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>

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

1 个答案: