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?

Why do you want to avoid "text-align:center" if you don't mind me asking? — Joey Ciechanowicz, Oct 25 '11 at 08:23
If you want to center-align the span’s text, use `span {text-align:center;}`. If this doesn’t produce the output you want, you’re going to have to explain why for us to be able to help you. (Otherwise we just have to guess what your actual requirements are.) — Paul D. Waite, Oct 25 '11 at 08:49
If it's a _title_, use the appropriate tag (h1, h2, h31 h4, h5 or h6), Don't use a non semantic . — Kyle, Oct 25 '11 at 08:58
In case anyone wants to use *style="vertical-align: middle;"* ... it only works if you apply it to the container DIV. Applying it to the span does nothing... at least in IE10. — Jason Parker, Jul 16 '13 at 19:16

score 31 · Accepted Answer · edited Oct 25 '11 at 09:00

31

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

edited Oct 25 '11 at 09:00

Kyle

65,599
28
144
152

answered Oct 25 '11 at 08:29

Lee

5,816
6
45
61

You can't specify the width of an inline element (e.g. a `span`): http://stackoverflow.com/a/621406/343204 – Snowcrash May 30 '14 at 20:48
5

You can when you change it too a block element. – Lee Jun 30 '14 at 19:58

score 4 · Answer 2 · edited Dec 08 '13 at 05:49

4

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.

edited Dec 08 '13 at 05:49

Emre

831
11
13

answered Oct 02 '13 at 15:59

Cuse70

271
3
5

Center align "span" text inside a div

2 Answers2

Linked