Вертикальное выравнивание изображения с CSS - странно - PullRequest
Новая
       9

Вертикальное выравнивание изображения с CSS - странно

2 голосов
/ 26 сентября 2010

У меня есть следующий код: 

<html>
<head>
<style type="text/css">
#test img {vertical-align: middle;}


div#test {
border: 1px solid green;
height: 150px;
line-height: 150px;
text-align: center;
color: white
}
</style>
</head>

<body>

<div id="test">t<img class="bottom" src="http://www.w3schools.com/css/w3schools_logo.gif" alt="W3Schools" width="270" height="50" /></div>
</body>
</html>

Если я удаляю t после изображения, то оно не выравнивается по центру по вертикали (я проверяю его в Firefox).Как сейчас, он выравнивается, так что я мог бы изменить цвет текста, чтобы он был таким же, как фон, или другим способом было установить встроенный стиль и установить его в качестве фона.

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

Ответы [ 3 ]

6 голосов
/ 26 сентября 2010

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

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

2 голосов
/ 26 сентября 2010

вместо символа t используйте &nbsp; это пробел.

но я не знаю, почему это произошло.Любое предложение, ребята?

1 голос
/ 26 сентября 2010

Я думаю, что ваша проблема заключается в применении свойства vertical-align к неправильному элементу - его следует применить к окружающему элементу img, то есть div#test в вашем случае: 

div#test {
border: 1px solid green;
height: 150px;
line-height: 150px;
text-align: center;
color: white
vertical-align: middle;
}

IНе знаете, почему он работает с добавленным символом t, возможно, из браузера?

...