带有border-radius的div中心文本

Question

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?

Answer 1

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> 

Answer 2

http://jsfiddle.net/gvoyu830/1/ Center in a circle

I did it for you, but only with relative position. (else, the text align: center; don't exactely works because the begin of your string is the left of the number)

Answer 3

JSFiddle

Add

text-align:center;
display: table-cell;
vertical-align: middle;

Example:

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;
   text-align:center;
    display: table-cell;
    vertical-align: middle;

}

Answer 4

Really want to contribute. This is what I've got:

DIV {
    display:inline-block;
    width: 10%;
    border: 1.5em solid #dddddd;
    border-radius: 50%;
    max-width: 1.15em;
    max-height: 1.15em;
    margin: 0 auto;
    text-align:center;
}

Fiddle Here

UPDATED : (with background the same as border color) JsFiddle