Почему, когда я центрирую изображение в элементе div с высотой строки, в верхней части экрана появляется зазор в 3 пикселя?

Посмотрите на эту страницу. Изображения справа должны быть в центре их делений. Но если вы посмотрите внимательно, в верхней части экрана есть небольшая граница размером около 3 пикселей. И если вы отключите overflow: hidden (через firebug или аналог IE8) он торчит снизу.

HTML это:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

И CSS, это:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

Что вызывает этот таинственный разрыв? Я проверил поля и отступы, и они, похоже, не являются проблемой.

Источник

3 ответа

Решение

NB: Я не совсем уверен, что это объяснение верно, но мне кажется разумным.

Во-первых, давайте посмотрим, что спецификация должна сказать о ведущих и полу-ведущих:

Так как значение 'line-height' может отличаться от высоты области содержимого, может быть пространство над и под визуализированными глифами. Разница между высотой содержимого и используемым значением 'line-height' называется ведущей. Половина ведущих называется половина ведущих.

Пользовательские агенты центрируют глифы вертикально во встроенном окне, добавляя половину в верхней и нижней части. Например, если фрагмент текста имеет высоту '12px' и значение 'line-height' равно '14px', следует добавить 2pxs дополнительного пробела: 1px выше и 1px ниже букв. (Это относится и к пустым ящикам, как если бы в пустом ящике была бесконечно узкая буква.)

Все идет нормально. Таким образом, любые линейные блоки в пределах div.small которые имеют высоту меньше, чем div.small"s line-height будет вертикально с div.small, Теперь давайте посмотрим на vertical-align собственность, а именно middle значение:

Совместите вертикальную среднюю точку поля с базовой линией родительского блока плюс половину высоты родителя по оси x.

Обратите внимание, что это не обязательно центр строки! Точная позиция будет меняться в зависимости от выбора шрифта и размера. Вы можете убедиться в этом, увеличивая и уменьшая размер текста: размер зазора изменяется.

Как вы обнаружили, настройка font-size: 0 устраняет разрыв полностью. Поскольку шрифт теперь не имеет высоты, линейный блок получает начальное и половинное начальное значение 50 пикселей, при этом базовая линия центрируется вертикально. Чтобы сделать vertical-align: middle изображение, браузер устанавливает свою среднюю точку на этой базовой линии плюс высоту x шрифта, которая теперь равна нулю. Это дает вертикально-центрированное изображение.

Источник

Оказывается, настройка font-size:0; на div решает проблему. Тем не менее, это все еще не объясняет разрыв. Кто-нибудь знает, что вызывает разрыв?

Источник

Я не могу полностью объяснить, что происходит, но после решения той же проблемы, похоже, что это как-то связано с тем, как я объявлял свойство шрифта в css, например

шрифт:11px/1.35em Verdana, Arial, Helvetica, без засечек;

= плохо для таблиц, по-видимому. - Я удалил это объявление и вместо этого использовал font-size:11px, line-height:px, font-family и т. Д., И это исправило разрыв!

Источник
Другие вопросы по тегам