Center align span text inside a div

Question

I have a HTML code as    lt div class  left  gt   lt span class  panelTitleTxt  gt Title text lt  span gt   lt  div gt    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

User · Answer

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.

User · Answer

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

[html] Center align "span" text inside a div

Examples related to html

Examples related to css