How to center text top/bottom when height 100% & display inline-block?

Question

I have responsive panels. I've tried a ton of things to get the text to be vertically centered, but I can't get it to work with what I have using twitter-bootstrap.

    *,

    *:before,

    *:after {

      box-sizing: border-box;

    }

    body {

      margin: 0

    }

    .testing-here {

      font-size: 0;

    }

    .panel-default {

      box-sizing: border-box;

      position: relative;

      width: 50%;

      padding-bottom: 40%;

      overflow: hidden;

      background-color: #446CB3;

      display: inline-block;

    }

    .panel-body {

      color: white;

      width: 100%;

      height: 100%;

      text-align: center;

      position: absolute;

      font-size: 16px;

      display: table-cell;

      vertical-align: middle;

    }

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example show me full page & resize window
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example font-size kept in between 16 and 50px max
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

Questions I looked into:

you have defined display:table-cell in panel-body but not defined display:table in the parent so you may try that — Dhaval Chheda, May 20 '16 at 16:51
have you tried using flexbox because that will resolve the issue — Dhaval Chheda, May 20 '16 at 16:54

score 2 · Accepted Answer · answered May 20 '16 at 17:00

Try using Flexbox: This is the working example of vertically and horizontally centering with flexbox.

Working example

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.testing-here {
  font-size: 0;
}
.panel-default {
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  overflow: hidden;
  background-color: #446CB3;
  display: inline-block;
}

.panel-body {
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  font-size: 16px;
  justify-content: center;
    align-items: center;
    display: flex;
}

score 0 · Answer 2 · answered Jun 07 '19 at 05:53

0

I was also having this issue, the text would sit at the bottom. Changing the flex direction to column fixed it.

answered Jun 07 '19 at 05:53

Rob

123
1
10

Can you please add example CSS also? – Nilambar Sharma Jun 07 '19 at 06:13
I had the same problem, but it was with React Native actually. I put Text inside of one View nested within another View whose height was 100%. On the nested View I put the following styling: `width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center` (flex direction is `column` by default in RN. Then my text centered vertically. – Rob Jun 07 '19 at 07:45

How to center text top/bottom when height 100% & display inline-block?

2 Answers2