Vertical alignment of text inside div

Question

I really need help on this: cracking me for 2nd day already. I have the following code:

* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}

.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}

.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}

.plus:before {
content: "+";
}

<div class='inlbtn'><span class='plus'></span></div>

It basically has a div and span inside with a "+" symbol. The horizontal alignment seems fine, but the vertical is a little shifted down. How to make it perfectly centered vertically?

I played around with the code and it seems the code under * is the culprit, but why?

Here's fiddle http://jsfiddle.net/jk34josq/2/

Answer 1

You do everything right, I always use the same method. The problem is that this line

content: "+";

is a piece of text, so it automatically has top margin inside of the line-height preserved for the capital letters (and + symbol is not the one); the margin value could also be different depending on the font.

As a proof try the following:

content: "A";

This looks centered.

What you can do to avoid this behavior:

1. Negative margin / top property
2. Use image instead of text
3. Maybe play with reducing the line-height property but I have doubts about this method

Answer 2

I would use only a single HTML element, since there is no need for using an extra element nor a :before pseudo class:

<div class='inlbtn'>+</div>

Then I would use display: inline-block , instead of table.

As mentioned by Simon in his answer, the + character is smaller than A . But instead of using negative margins or paddings, I would alter the line-height:

.inlbtn {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: #666;
    border: 1px solid #939393;
}

Updated Fiddle

Answer 3

Try like this: Demo

.inlbtn {
    width: 2rem;
    height: 2rem;
    display: block;
    text-align: center;
    font-weight: bold;
    color: #666;
    border: 1px solid #939393;
}
.plus {
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle !important;
}
.plus:before {
    content:"+";
    display: inline-block;
}