如何在bootstrap4列中垂直和水平居中此文本? [英] How to vertically and horizontally center this text inside bootstrap4 columns?

问题描述

我有这个bootstrap 4网格，其中一行具有200px的高度，并具有两列:

I have this bootstrap 4 grid with a row having a height of 200px, and two columns:

<div class="row" style="height:200px;background-color:grey">
   <div class="col-md-10">
      <span>How to center this vertically/horizontally</span>
   </div>
   <div class="col-md-2">
      <span>This too</span>
   </div>
</div>

我不确定如何在垂直和水平方向的两列中居中放置文本.

I'm not sure how I can center the text in both columns both vertically and horizontally.

这是一个小提琴: http://jsfiddle.net/x1hphsvb/31/

我已经在stackoverflow上找到了类似的问题/答案，但是找不到适合我的案例的答案.

I have looked at similar question/answers on stackoverflow, but I couldn't find an answer that actually worked in my case.

那怎么做呢?

推荐答案

使用最新版本(Bootstrap 4 alpha 6).

Using the lastest version (Bootstrap 4 alpha 6).

使用 align-items-center 类在垂直方向上居中， text-center 在水平方向上居中...

Use the align-items-center class to vertically centter, and text-center to horizontal center...

<div class="row text-center align-items-center" style="height:200px;background-color:grey">
   <div class="col-md-10">
      <span>How to center this vertically/horizontally</span>
   </div>
   <div class="col-md-2">
      <span>This too</span>
   </div>
</div>

https://www.codeply.com/go/vaGYMJHA3T

这篇关于如何在bootstrap4列中垂直和水平居中此文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！