Css centering text in background image
I have a number inside a background image. I cannot place the number in the center of the circle. So far I have the number, but it is at the very top of the circle. How do I move it to the center?
HTML code:
<div class="number">
<p>
576
</p>
</div>
CSS code:
.number{
float:left;
background-position: center;
text-align: center;
font-size:200%;
}
.number p{
position:relative;
top: 38%;
left:57%;
z-index:999;
background-image: url("http://davidwalsh.name/demo/css-circles.png");
width: 207px;
height: 204px;
}
Here is the jsfiddle
All you have to do is set line-height
for your element p
such as line-height: 204px;
that which is equivalent to the element's height.
Demo
.number p {
/* Other properties here */
line-height: 204px; /* add this */
}
Also, I have no idea why you are using properties top
and left
here with a property z-index
, I think you can clean up the mess pretty much.
Now check your script. https://jsfiddle.net/ydz8cn7b/1/
I have updated it as per your requirement:
Html
<div class="number">
<p>576</p>
</div>
CSS
.number {
float:left;
background-position: center;
text-align: center;
font-size:200%;
display:table;
}
.number p {
display:table-cell;
background-image: url("http://davidwalsh.name/demo/css-circles.png");
width: 207px;
height: 204px;
vertical-align:middle;
}
use line-height:
204px
This option is suitable when the text consists of one line
.number{
float:left;
background-position: center;
text-align: center;
font-size:200%;
}
.number p{
position:relative;
top: 38%;
left:57%;
z-index:999;
background-image: url("http://davidwalsh.name/demo/css-circles.png");
width: 207px;
height: 204px;
line-height: 204px;
}
<div class="number">
<p>
576
</p>
</div>
One good solution is
display: table-cell;
vertical-align: middle;
Check Fiddle
Add below CSS properties inside this class .number p{}
display: table-cell;
vertical-align: middle;