Center text in div with border-radius

css, html, vertical-alignment

Solution

It can be achieved simply by setting `height`/`width` of divs and a `line-height` which is equal to the `height` in order for vertical alignment.

`text-align: center` will do the horizontal alignment.

div {
    display: inline-block;
    text-align: center;
    /* width: 10%; */
    /* border: 1.2em solid #dddddd; */
    background-color: #ddd;
    width: 2.4em;
    height: 2.4em;
    line-height: 2.4em;
    border-radius: 50%;
    /* max-width: 1.2em; */
    /* max-height: 1.2em; */
    /* box-sizing: border-box; */    
    /* margin: 0 auto; */
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Problem

I want to vertical and horizontal center text in only one div which has a surrounding circle made with border-radius. Currently the text is shown in the lower right corner tho... Look here for the fiddle: http://jsfiddle.net/gvoyu830/ My css: ``` DIV { display: inline-block; width: 10%; border: 1.2em solid #dddddd; border-radius: 50%; max-width: 1.2em; max-height: 1.2em; box-sizing: border-box; margin: 0 auto; } ``` Any ideas?

Original source