Центрирование в IE5 / 6/7/8 и FF - PullRequest
Новая
       22

Центрирование в IE5 / 6/7/8 и FF

3 голосов
/ 30 мая 2010

Я пытаюсь центрировать содержимое div таким образом, чтобы в IE 5,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 изображение выравнивается по левому краю. Текст также выравнивается по левому краю, с одним словом в строке, например:

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

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

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

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

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

Ответы [ 4 ]

3 голосов
/ 30 мая 2010

Когда вы сказали "Похоже, что это так", не на что было смотреть.

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

http://validator.w3.org/

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

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

margin: 0 auto

чтобы центрировать ваши div. Это, вероятно, будет гораздо более эффективным.

Надеюсь, это поможет:)

0 голосов
/ 30 мая 2010 
#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>
0 голосов
/ 30 мая 2010

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

margin-left: auto;
margin-right: auto;
0 голосов
/ 30 мая 2010

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

...