Question

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.