AnthonyGalli.com AnthonyGalli.com - 6 months ago 13
HTML Question

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

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:


Answer

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;
}
Comments