Question

我有这个bootstrap 4网格，一行高度为200px，有两列：

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

我不确定如何在垂直和水平两个列中居中显示文本。

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

我在stackoverflow上看过类似的问题/答案，但我找不到一个在我的案例中实际起作用的答案。

那怎么办呢？

Answer 1

Using the lastest version (Bootstrap 4 alpha 6).

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

Answer 2

您可以通过将两个列下的元素居中来水平和垂直居中文本。

您需要添加以下三个类

<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous"> </head> <div class="row" style="height:200px;background-color:grey"> <div class="col-md-10 d-flex align-items-center justify-content-center"> <span>How to center this vertically/horizontally</span> </div> <div class="col-md-2 d-flex align-items-center justify-content-center"> <span>This too</span> </div> </div>

flex

第一个类将使列显示属性变为function add_custom_jquery_ui() { wp_enqueue_script( 'jquery-ui-draggable' ); wp_enqueue_script( 'jquery-ui-droppable' ); } add_action( 'admin_enqueue_scripts', 'add_custom_jquery_ui' );

Answer 3

Add these as classes to your spans text-center and align-middle.

The documentation for these classes can be seen here:

Typography: https://v4-alpha.getbootstrap.com/utilities/typography/

Vertical Alignment: https://v4-alpha.getbootstrap.com/utilities/vertical-align/

If this doesn't work, alternatively, you can add divs around the span, give them a class and give the classes the following styles: http://jsfiddle.net/x1hphsvb/32/

.col-md-10{
  height: 200px;
}
.col-md-2{
  height: 200px;
}

.this-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.that-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="height:200px;background-color:grey">
   <div class="col-md-10">
      <div class="this-div">
      <span>How to center this vertically/horizontally</span>
      </div>
   </div>
   <div class="col-md-2">
      <div class="that-div">
      <span>This too</span>
      </div>
   </div>
</div>

Answer 4

Using position:relative and position:absolute plus transform:translate().

I changed col-md to col-xs so that you can see the effect in the snippet (because the snippet is small).

I also added height:100% to both column so that they take the height of the parent and you can see the that the span is centered horizontally and vertically. This will also stay aligned even when you resize the browser

.col-xs-10,
.col-xs-2 {
  position: relative;
}

.col-xs-10 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.col-xs-2 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="height:200px;background-color:grey">
  <div class="col-xs-10" style="background-color:red;height:100%;">
    <span>How to center this vertically/horizontally</span>
  </div>
  <div class="col-xs-2" style="background-color:blue;height:100%;">
    <span>This too</span>
  </div>
</div>

如何在bootstrap4列中垂直和水平居中显示此文本？

4 个答案: