如何在列中垂直放置文本居中(引导程序4)? [英] How to vertically center a text in a column (bootstrap 4)?

问题描述

如何在列中垂直放置文本(引导4)?该结构是基本的，请参见:

How to vertically center a text in a column (bootstrap 4)? The structure is basic, see:

<div class="row">
    <div class="col-md-6">
        <span>Text to center</span>
    </div
</div>

你们好！

推荐答案

您可以添加我-auto 类添加到父<div class="col-md-6">即可实现此目的.此类在y轴上设置自动页边距，有关更多详细信息，请参见上面的链接.

You can add the my-auto class to the parent <div class="col-md-6"> to achieve this. This class sets automatic margins on the y-axis, see the link above for more details.

它看起来像这样:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6 my-auto">
      <span>Text to center</span>
    </div>
    <div class="col-xs-6">
      <h1>Hello</h1>
      <h1>Hello</h1>
      <h1>Hello</h1>
    </div>
  </div>
</div>

您可能会想使用垂直对齐实用程序，但这只会处理内联，内联块，内联表和表单元格元素.

You might be tempted to use vertical alignment utilities but these will only work on inline, inline-block, inline-table, and table cell elements.

这篇关于如何在列中垂直放置文本居中(引导程序4)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！