Cannot align text to center

Question

I'm trying to align text to center (vertically and horizontally):

  <div class="panel-small sport">
    <b>Sport and Activity</b>
  </div>

this is the css:

.panel-small *
{
  text-align: center;
  vertical-align: middle;
}

.sport
{
  background-image: url("../img/sport.png");
 left: 248px;
}

the text appear even on top

Do yo want to vertically align the text? – Radames E. Hernandez May 31 '18 at 15:47 — Radames E. Hernandez, May 31 '18 at 15:47

score 1 · Accepted Answer · answered May 31 '18 at 15:47

1

Try flex positioning:

display: flex;
justify-content: center;
align-items: center;

answered May 31 '18 at 15:47

billy.farroll

this align only horizontally not vertically – Charanoglu May 31 '18 at 15:49
See how this is used here: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ This should work fine with what you're trying to achieve here. – billy.farroll May 31 '18 at 15:53

score 0 · Answer 2 · answered May 31 '18 at 15:49

You can check this trick:

CSS:

text-align: center;
vertical-align: middle;
line-height: 90px;  /* the same as your div height */

Or you can use Flexbox with this:

CSS:

.panel-small *{
    display: flex;
    justify-content: center;
    align-items: center;
}

Regards!

2 Answers2