CODEWITHSUNDEEP
htmlcss
copenndthagen
copenndthagen

Reputation: 50722

Center align "span" text inside a div

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?

Upvotes: 29

Views: 178737

Answers (2)

Cuse70
Cuse70

Reputation: 381

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.

Upvotes: 4

Lee
Lee

Reputation: 5936

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

Upvotes: 32

Related Questions