Введение в статью Wulin.com (www.vevb.com): Как сосредоточить изображения вертикально.
Ширина и высота изображения неизвестны, и фиксированного размера нет. Согласно этой предпосылке, довольно трудно сделать изображение вертикально центрированным в контейнере с фиксированной шириной и высотой. Поскольку недавние проекты могут использовать это решение, я собрал и разобрался с некоторыми часто используемыми методами.
Следующая цифра является идеальным рендерингом. Ширина и высота внешнего контейнера фиксируются, а ширина и высота изображения в середине неизвестны, но изображение всегда должна быть вертикально центрирована относительно внешнего контейнера.
Тем не менее, эффект, реализованный в действительности, не является идеальным. Поскольку анализ каждого браузера отличается, каждый браузер будет иметь отклонение 1px-3px.
Метод 1 (XHTML 1.0 Переход):
Этот метод состоит в том, чтобы установить режим отображения внешнего контейнера для отображения: таблица, гнездо, гнезд пролета за пределами тега IMG и установить режим отображения пролета для отображения: таблица, так что вертикальный парад может быть легко выровнен, как элементы таблицы. Конечно, это только в стандартных браузерах, IE6/IE7 также необходимо использовать позиционирование.
HTML -структура часть:
<div id = box>
<pran> <img src = images/demo.jpg alt => </span>
</div>
CSS Style Part:
<стиль типа = текст/css>
#коробка{
Ширина: 500px; высота: 400px;
дисплей: таблица;
Текст-альбом: Центр;
Граница: 1px solid #d3d3d3; фон: #fff;
}
#box span {
дисплей: табличная клетка;
Вертикальная атака: средняя;
}
#box img {
Граница: 1PX SOLID #CCC;
}
</style>
<!-[если IE IE 7]>>
<стиль типа = текст/css>
#коробка{
позиция: относительно;
переполнение: скрыто;
}
#box span {
позиция: абсолютно;
Слева: 50%; Верх: 50%;
}
#box img {
позиция: относительно;
Слева: -50%; вверху: -50%;
}
</style>
<! [endif]->
Метод 2 (XHTML 1.0 Переход):
Принципы и структуры реализации метода 2 и метода 1 аналогичны, а структуры одинаковы. Метод 1 использует условные аннотации, а метод 2 использует CSS Hack.
CSS Style Part:
<стиль типа = текст/css>
#коробка{
Ширина: 500px; высота: 400px;
переполнение: скрыто;
позиция: относительно;
дисплей: табличная клетка;
Текст-альбом: Центр;
Вертикальная атака: средняя;
Граница: 1px solid #d3d3d3; фон: #fff;
}
#box span {
позиция: статическая;
*позиция: абсолютно; /*Взломать для IE6/7*/
Верх: 50%; /*Взломать для IE6/7*/
}
#box img {
позиция: статическая;
*позиция: относительно; /*Взломать для IE6/7*/
Верх: -50%; Слева: -50%; /* Взломать для IE6/7*/
Граница: 1PX SOLID #CCC;
}
</style>
Этот метод имеет недостаток. В стандартном браузере, поскольку отображается режим отображения внешнего контейнера #box: табличная клетка, атрибут маржи не может быть использован для #box, а настройка границ в IE8 также является недействительной.
Метод 3 (xhtml 1.0 строго):
Стандартные браузеры по-прежнему устанавливают режим отображения внешнего контейнера #box для отображения: таблица. IE6/IE7 использует метод вставки пары пустых тегов перед тегом IMG.
HTML -структура часть:
<div id = box> <i> </i> <img src = images/demo.jpg alt => </div>
CSS Style Part:
<стиль типа = текст/css>
#коробка{
Ширина: 500px; высота: 400px;
дисплей: табличная клетка;
Текст-альбом: Центр;
Вертикальная атака: средняя;
Граница: 1px solid #d3d3d3; фон: #fff;
}
#box img {
Граница: 1PX SOLID #CCC;
}
</style>
<!-[IE IE]>
<стиль типа = текст/css>
#box i {
дисплей: встроенный блок;
высота: 100%;
Вертикальная атака: Средний
}
#box img {
Вертикальная атака: Средний
}
</style>
<! [endif]->
Метод 3 также применяется к переходу XHTML 1.0. Вышеуказанные методы собираются с веб -сайта обучения. В настоящее время только эти три метода вполне удовлетворены, и совместимость хороша, а ограничения относительно невелики. Я также проверил некоторые методы один за другим, но результаты не являются идеальными, и существуют разные различия между различными браузерами. Кроме того, Situ Zhengmei также собрал некоторые методы здесь.
Мышление: Многие методы полагаются на установку режима отображения внешнего контейнера в таблицу для достижения вертикального центрирования, то есть DIV для моделирования таблицы. Насколько хорошо было бы, если бы CSS обладает собственностью для достижения этого эффекта. Если у вас есть хороший метод, вы можете поделиться им.
Оригинал: