How to vertically and horizontally center this text inside bootstrap4 columns?

Question

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.

Here is a fiddle: http://jsfiddle.net/x1hphsvb/31/

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

So how to do this?

score 3 · Accepted Answer · edited Sep 22 '17 at 14:41

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

realappie · Answer 2 · 2017-06-15T10:37:28.880

You could center the text horizontally and vertically by centering the elements under both columns.

You will need to add the following three classes

d-flex justify-content-center align-items-center

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

The first class will make the columns display property become flex

Clams Are Great · Answer 3 · 2017-06-15T09:41:11.003

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>

This would work if OP didn't have the text in spans, or the spans had the full height of their parent. — realappie, Jun 15 '17 at 09:31
@Abdel I have updated my answer, which should allow OP to apply styles allowing them to horizontally and vertically align their text. — Clams Are Great, Jun 15 '17 at 09:36

score 0 · Answer 4 · answered Jun 15 '17 at 09:37

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>

How to vertically and horizontally center this text inside bootstrap4 columns?

4 Answers4

Related