How to vertically center text in a column (bootstrap 4)?

Question

How to vertically center 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>

You guys!

Answer 1

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

It will look like this:

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

Run codeHide result

You may be tempted to use the vertical alignment utilities , but they will only work with inline, inline blocks, inline tables, and table cell elements.

Answer 2

- (my-auto) flexbox.

<div class="container">
    <div class="row">
        <div class="col-md-6 align-self-center">
            <span>Text to center</span>
        </div>
        <div class="col-md-6">
            <p>
            ..
            </p>
        </div>
    </div>
</div>

http://www.codeply.com/go/oy8H1bUOL1

, Bootstrap, .