Не можете получить текст по центру?

Question

У меня есть div, обернутый вокруг пары span, и использующий JS для увеличения и уменьшения диапазона (для отзывов).Все работает, за исключением того, что я не могу получить текст span по центру в div.Вот соответствующий код:

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 />

А вот слайд-шоу CSS -

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

Может кто-нибудь сказать мне, что я делаю неправильно?О, да, я попытался text-align:center; без удачи.

[Редактировать] Я хотел бы добавить, я также попытался добавить в !important без изменений.

Answer 1

Я проверил ваш код и только что добавил

.slideshow {
    text-align: center; 
}

и текст по центру просто отлично.

Может быть, у вас есть опечатка или определение CSS где-то еще, которое переопределяет выравнивание текста?

Редактировать

Я выполнил «элемент проверки» опубликованной скрипки, и вот определения CSS, которые я получил:

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

Я бы сказал, что "display: block" - это ваша проблема.

Answer 2

Вам необходимо применить text-align: center к содержащему <div> и не делать ничего, что приводит к тому, что <span> s будет отображаться как блок (например, float их). Абсолютное позиционирование также вытянет элементы из нормального потока, чтобы на них не влияло выравнивание текста.

---

Обновление : Теперь приведен рабочий пример, мы можем видеть, что происходит. Элементы span абсолютно позиционируются плагином:

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

Похоже, вам нужно переосмыслить логику компоновки, которую использует плагин.