Текст центра текста в слайдере

Question

Я пытаюсь центрировать текстовый div в пользовательском слайдере.

По какой-то причине CSS не будет работать. Веб-сайт находится на моем тестовом сервере по адресу http://bit.ly/ZgawU6

Я хочу сосредоточить группу текста «Экологическая забота» в верхнем слайдере. Как и на этом сайте www.sevenly.org

Он работает, когда я меняю div на позицию: relative, вместо положения: absolute; однако я могу изменить его только с помощью инспектора Chrome. Когда я добавляю его в файл CSS, он не работает.

Может ли кто-нибудь указать мне в правильном направлении, почему этот код не работает?

.custom-slider-caption, .custom-slider-title { 
line-height: 1.3; 
text-align: center; 
position: relative; 
} 

сОн в вопросе:

<div class="custom-slider-title" style="top: 0px; opacity: 1;"><div style="position: absolute; left:”0″px; top:140px; right:”0″px; bottom:px; font-size: 43px; color:#fff; text-shadow: 4px 4px 1px #497ca0; ">Environmental Concern</div></div> 

Answer 1

Он не работает на абсолютное положение, поскольку абсолютные позиционированные элементы не являются 100% шириной. Вы можете установить witdh на 100%, или, бит , решение для очистки должно было бы установить значение right равным нулю. Таким образом, у вас будут left и right позиции до нуля, а ширина будет автоматически равна 100%.

div { 
    positon: absolute; 
    top: 140px; 
    left: 0; 
    right: 0; 
} 

Вы даже не нужно указывать px если значение каче к нулю, потому что любой размер устанавливается равным нулю в%, эм, рх или что-то все будут иметь одинаковый размер. Нуль равен нулю.

Answer 2

.custom-slider-caption, .custom-slider-title { 
    width: 100%; 
    line-height: 1.3; 
    text-align: center; 
} 

Answer 3

Ваш код должен выглядеть примерно так, если вы хотите быть DIV по центру

#div 
{ 
width:600px; 
margin-left:auto; 
margin-right:auto; 
} 

// NOTE: THE WIDTH CAN BE CHANGED // 

#div p 
{ 
width:300px; 
margin-left:auto; 
margin-right:auto; 
} 

Answer 4

Ответ pzin правильный. Используйте этот селектор:

.custom-slider-title > div { 
    ... 
    left: 0; 
    right: 0; 

}