0

I'm trying to center (horizontally and vertically) a div inside a column (it's the one with class="centered-column") nested under a flex row.

I tried to apply the inforamtion given on this answer, and also on this css-tricks guide, without success.

Here's the code: 

span {
  font-size: 20px;
}
.row {
  display: -webkit-flex;
  display: -ms-flexbox;
}
.col-md-8 {
 background-color: lightblue;
}
.centered-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
    <div class="col-md-4 text-center">
      <div class="row">
        <div class="col-md-12">
            <span>Row number 1</span>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <span>Row number 2</span>
        </div>
      </div>
    </div>
    <div class="col-md-8">
       <div class="centered-column">
          <span>Some text<span>
       </div>
    </div>
</div>

What should I do to make it work (Note that I have to use Bootstrap 3)?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
OfirD
  • 9,442
  • 5
  • 47
  • 90
  • you are almost, make the center class a little upper, on its parent container `col-md-8` ... as a side note: better upgrade to V4 of bootstrap – Temani Afif May 13 '18 at 15:34

2 Answers2

0

You need to give the .centered-column height. Otherwise, it has the height of its children. The children are vertically centered, but not in the column:

span {
  font-size: 20px;
}
.row {
  display: -webkit-flex;
  display: -ms-flexbox;
}
.col-md-8 {
 background-color: lightblue;
}
.centered-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
    <div class="col-md-4 text-center">
      <div class="row">
        <div class="col-md-12">
            <span>Row number 1</span>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <span>Row number 2</span>
        </div>
      </div>
    </div>
    <div class="col-md-8">
       <div class="centered-column">
          <span>Some text<span>
       </div>
    </div>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
  • or we put the center class with the col-md-8 and we remove an extra div ;) – Temani Afif May 13 '18 at 15:39
  • @TemaniAfif agreed. But in doing so we only help OP. In explaining the principle, we teach all future visitors and OP how this works. What's the goal here? – tao May 13 '18 at 15:40
  • yes I know, we should teach everyone, but my comment was another alternative ;) – Temani Afif May 13 '18 at 15:41
  • @TemaniAfif Yes, applying `flex` on the column instead of the child works. That's the problem with flexbox: you need to apply it to all chain of parents from the one setting height to the one that should expand, in order to work. – tao May 13 '18 at 15:43
0

As @Temani afif commented, the only change that's needed is:

<div class="col-md-8 centered-column">
   <span>Some text<span>
</div>

full snippet: 

span {
  font-size: 20px;
}
.row {
  display: -webkit-flex;
  display: -ms-flexbox;
}
.col-md-8 {
 background-color: lightblue;
}
.centered-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
    <div class="col-md-4 text-center">
      <div class="row">
        <div class="col-md-12">
            <span>Row number 1</span>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <span>Row number 2</span>
        </div>
      </div>
    </div>
    <div class="col-md-8 centered-column">
       <span>Some text<span>
    </div>
</div>
OfirD
  • 9,442
  • 5
  • 47
  • 90