I have a HTML code as;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
My CSS is as follows;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)
I tried the standard way of using margin:auto, but that is not working.
Also I want to avoid using text-align:center.
Is there some other way of fixing this?
You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.
You could give the span a set width, then add the margin:0 auto again. This would center-align it.
.left
{
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt
{
display:block;
width:100px;
height: 100%;
margin: 0 auto;
}
If you know the width of the span you could just stuff in a left margin.
Try this:
.center { text-align: center}
div.center span { display: table; }
Add the "center: class to your .
If you want some spans centered, but not others, replace the "div.center span" in your style sheet to a class (e.g "center-span") and add that class to the span.
Source: Stackoverflow.com