Twitter Bootstrap Question posted in

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

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:

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search