Can't get text to center?

Question

Hi,

I have a div wrapped around a couple span's and using JS to make the span's fade in and out (for testimonials). Everything works, except I can't get the span text to center within the div. Here's the relevant code:

HTML -

<div class="slideshow">
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

And here's the slideshow CSS -

.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
}

Can anyone tell me what I'm doing wrong? Oh and yes I've tried text-align:center; with no luck.

[Edit] I'd like to add I've also tried adding in !important with no change.

Answer 1

You need to apply text-align: center to the containing <div>, and not do anything that causes the <span>s to be rendered as a block (such as floating them). Absolute positioning would also pull elements out of normal flow so they wouldn't be influenced by text-align.

---

Update : Now a working example has been provided, we can see what is going on. The span elements are being absolutely positioned by the plugin:

$slides.css({position: 'absolute', top:0, left:0}).hide()

Looks like you will need to rethink the layout logic the plugin is using.

Answer 2

I tested your code and just added

.slideshow {
    text-align: center; 
}

and the text centered just fine.

Maybe you've got a typo, or a css definition somewhere else that overrides your text-align?

Edit

I did an "inspect-element" of the fiddle posted and here are the css definitions i got:

<div class="slideshow" style="position: relative; ">
    <span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; z-index: 3; top: 0px; left: 0px; display: block; width: 13px; height: 15px; opacity: 0.275808; ">Hi</span>
    <span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; top: 0px; left: 0px; display: block; width: 52px; height: 15px; z-index: 2; opacity: 0.724192; ">Goodbye</span>
</div>

element.style {
    color: #333;
    display: block;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif;
    font-size: 12px;
    height: 15px;
    left: 0px;
    opacity: 1;
    position: absolute;
    top: 0px;
    width: 52px;
    z-index: 3;
}

I would say the "display: block" is your problem.