How can I make my text be vertically aligned within a DIV?

Question

I have this code:

<div style="font-size: 1.5rem; width: 20%;vertical-align: middle;" >ABC</div>

When I look at the page it shows like this. I added x's to show the boundary of the DIV:

xxxxxxxxxxxxxxx
x             x
x ABC         x
x             x
x             x
xxxxxxxxxxxxxxx

It seems like the vertical-align is not doing anything.

Is there I can make it so that the space above and below the ABC is the same. I saw CSS tables and Flex. Is there a way I can do it with standard CSS or do I need to use something like CSS tables or Flex?

Answer 1

Used to display property as like this

display:table-cell;

-

<div style="font-size: 1.5rem;border:solid 1px red; height:100px; width: 20%;display:table-cell;vertical-align: middle;" >abc</div>

Answer 2

There is one way to solve this without display: table; and display: flex. It's a bit tricky, but works ok.

To start with, your snipped does not work like this, because the vertical-align property applies to inline and table-cell boxes only. A <div> is display: block by default and therefore out of scope.

So, what can we do? This:

.vertical-align-content
{
  height: 150px;
  background-color: silver;
}

.vertical-align-content > span,
.vertical-align-content::before
{
  display: inline-block;
  vertical-align: middle;
}

.vertical-align-content::before
{
  height: inherit;
  content: "";
}

<div class="vertical-align-content">
  <span>Hello</span>
</div>

This solution is placing a pseudo element insde of .vertical-align-content with the height inherited of the parent container. The pseudo element and the <span> are both set to display: inline-block and can therefore be positioned using vertical-align. The biggest item (the pseudo element) will force the span to be aligned vertically centered to itself.

Answer 3

you can try this one:

<div style="display: table; height: 300px; overflow: hidden;display: table-cell; vertical-align: middle;">abc</div>

DEMO HERE

Answer 4

Why not just use line-height?

Fiddle: http://jsfiddle.net/SVJaK/2757/

<div class="test">ABC</div>

CSS:

.test {
   border: 1px solid green;
   width: 200px;
   line-height: 200px;
}