Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center text in div with border-radius

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?

like image 262
kaljak Avatar asked Feb 18 '15 09:02

kaljak


2 Answers

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>
like image 145
Hashem Qolami Avatar answered Oct 06 '22 01:10

Hashem Qolami


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)

like image 43
Thomas Rbt Avatar answered Oct 06 '22 00:10

Thomas Rbt