css: make text appear vertically centered

Question

I am trying to make some text appear centered in an element, but I can't seem to get it vertically aligned.

I have created a jsfiddle: http://jsfiddle.net/bz8Gn/ The arrow needs to be moved more up.

I have tried vertical-align:middle (and top)

.cont {
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
    border-radius:10px;
    text-align:center;
}

.arrow {
    font-size:18px;
}

<div class = "cont">
    <span class = "arrow">&#8658</span>
</div> 

Answer 1

Try this one

.arrow {
    display: block;
    font-size: 18px;
    line-height: 10px;
}

If you want to set the text vertically centered, you have to set the line-height in CSS. This only works on this situation.

I tried setting the line-height of the arrow to the same as the height of the .cont but the result was not... really aligned, so I have to reduce by 2 pixels to make it appear as aligned.

Demo: http://jsfiddle.net/jlratwil/49cjg/

Answer 2

have a look here: http://jsfiddle.net/bz8Gn/5/

use position relative to move the object 5px up

CODE

.cont {
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
     border-radius:10px;
    text-align:center;
    position: relative;
}
.arrow {
    font-size:18px;
    position: relative;
    top: -5px;
}

Answer 3

Your updated Fiddle

You can combine vertical-align with line-height

.arrow {
    vertical-align: top;
    font-size:18px;
    line-height: 12px;
}

Answer 4

the vertical-align property will cause the targeted element to align itself in relation to other inline elements.

To other inline elements (except when applied to table cells, where it's applied to the content). Taken from this article (recommended to read): Understanding CSS’s vertical-align Property.

Now, to solve it. You have different ways to do this:

1. Set the line-height of the container box equal to its height:

   .cont{
       width:25px;
       cursor:pointer;
       border:solid 1px gray;
       height:12px;
       line-height: 12px;
       border-radius:10px;
       text-align:center;
   }
   
   .arrow{font-size:18px;}
   

2. Set the div to display: table-cell and give the arrow a vertical-align: middle:

   .cont{
       width:25px;
       cursor:pointer;
       border:solid 1px gray;
       height:12px;
       display: table-cell;
       border-radius:10px;
       text-align:center;
       /* vertical align applied to the contents */ 
       vertical-align: middle;
   }
   
   .arrow{
       font-size:18px; 
    }
   

3. Use absolute positioning or margins to reposition the arrow.

By the way, beware that the second one doesn't work on IE7 and below (see display :table-cell does not work in ie 7?).

Answer 5

vertical-align only works with block elements. I set the height for you to illustrate how it works.

• Updated your fiddle http://jsfiddle.net/bz8Gn/1/