html - Center align "span" text inside a div

Question

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?

Answer 1

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;
}