Center text in div with border-radius
Solution 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>
Solution 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)
Solution 3
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;
}
Solution 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
kaljak
Updated on June 15, 2022Comments
-
kaljak almost 2 years
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?