2010-05-30 2 views
3

Я пытаюсь центрировать содержимое div таким образом, чтобы дисплей был корректным в IE 5,6,7 и 8, а также FF.Центрирование в IE5/6/7/8 и FF

<div id="YoutubeClip"> 
    <h3>Subscribe on YouTube!</h3><br> 
    <ul class="gallery clearfix"><a href="http://www.someyoutubevideo.com" rel="prettyPhoto" title="Some youtube title"><img alt="some youtube title" src="youtube clip image" border="0"></a></ul> 
    Some youtube title 
</div> 

Мой CSS прост:

text-align: center 

Как и ожидалось, это показывает изображение и текст с центром в FF.

В IE5 изображение выравнивается по левому краю. Текст также выравнивается по левому краю, только с одним словом на линии, как следующее:

Это
появляется
как
этого.

IE 6 имеет ту же проблему, что и выше.

IE 7, похоже, имеет ту же проблему, но когда я помещаю границу вокруг div, содержимое переполняет границу.

На дисплее отображается правильно в IE8

Любая помощь в этом было бы здорово. Я пытаюсь научиться CSS лучше, и я еще не смог понять тонкости этой проблемы.

+3

Сообщение СМЧ, что вы использовали слишком, пожалуйста. –

+2

Почему вы пытаетесь протестировать IE5? У вас есть серьезная причина для этого? – FelipeAls

ответ

3

Когда вы сказали «Это похоже на это», на что-то не на что смотреть.

Первое, что я хотел бы сделать это проверить код, как <ul> тег у вас есть используется неправильно:

http://validator.w3.org/

Основная цель для проверки кода для совместимости браузера.

Я не могу видеть CSS, который вы используете, и я никогда не протестирован с IE5, но я хотел бы попробовать использовать

margin: 0 auto

к центру ваших див. Вероятно, это будет намного более эффективно.

Надежда, что помогает :)

+0

Вы также можете добавить 'align = "center"' к самому тегу div. –

0

вы должны использовать text-align:center для ul и h3. если вы можете опубликовать css, чем это может быть лучше. Попробуйте это.

0

Для выравнивания элемента уровня блока в центре, вам необходимо:

margin-left: auto; 
margin-right: auto; 
0
#YoutubeClip { 
margin: 0 auto 0 auto; 
} 

0 = верхний и нижний авто = левый и правый

имея это в DIV, который оборачивает контент внутри него должен центрировать весь блок и поддерживать его в центре, даже если браузер пользователей не будет максимизирован или изменен.

Если вы хотите, чтобы центрировать содержимое внутри блока, а не блок его собственного

text-align: center; должен быть добавлен к h3 и другим тегам в #YoutubeClip

является то, что вы будете искать

Я бы предложил добавить <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> в начало вашего html-файла, прежде чем пытаться проверить, чтобы у вас была прочная база для начала проверки.

Что касается вашего <ul class="">, его можно изменить на <div class="">, если вы планируете использовать его так, как вы показываете в своем примере кода. В противном случае вам нужно будет добавить <li></li> вокруг содержимого внутри него (для каждой отдельной строки).

EX:

<ul> 
    <li>content goes here</li> 
    <li>more content</li> 
</ul> 
Смежные вопросы