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