Выражая IT

Прежде, чем мы имели дело с CSS для создания макетов страниц нашего, совместив часть содержимого внутри ячейки таблицы, казалось, игра просто ребенка. Просто установите "align" или "VALIGN" свойство таблицы имеют выравнивание по вашему выбору, кусок пирога!
С макеты CSS, хотя у нас есть "вертикального выравнивания" свойства элементов, она не кажется такой простой, как «выравнивание» или «VALIGN" свойства. Чтобы быть более specifiic "вертикального выравнивания" никогда, кажется, решить любые ваши проблемы, особенно если будут писать кусок кросс-браузерный CSS.

Без использования таблиц HTML, задачи центровки на объект, будь то изображение или текст, содержащий внутри подразделения, вероятно, было каждый UI / CSS разработчики кошмар какой-то момент. Эта проблема дальнейшего экстраполирует ваши заботы согласования, если объект по центру динамический характер, т.е., когда его высота переменные (неизвестные высоты).

Несмотря на отсутствие известных прямым решением, которое будет работать по всему спектру браузеров мы имеем дело с того, что решение, которое я пытался прийти к действительно похоже на работу в нескольких браузерах, которые я пробовал в (IE6, IE 7 , FF).

РЕШЕНИЕ:
В браузерах Mozilla, Opera и Safari, странное поведение "вертикального выравнивания" имущество может быть доведена до его чувств, просто установив "дисплей" имуществом содержащие деление на «ячейки таблицы" (дисплей: ячейки таблицы) .

Проблема остается с IE браузеров семейства, который, однако, похоже, не понимают, что с "ячейки таблицы" имущество и невежды, как они есть, они просто игнорируют его. Решение приводится ниже, хотя простой, объявления нескольких DOM элементов в HTML, чтобы все произошло.

CSS и HTML выглядит следующим образом
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> производителя <br/> просмотров: 3456 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

просмотреть демонстрацию здесь | Скачать исходных файлов (Скачано 451 раз)

---

Понимание решения:
Для браузеров, которые понимают, дисплей: стол и дисплей: свойства ячейки таблицы, он редко нуждается в объяснении. Для IE, с использованием IE конкретных хак (хэш-хак), мы абсолютно позиционировать объект контейнера (obj_container) в половине доступную высоту. Затем объект (объект) в это положение относительно и перешел на половину его высоты ... Ну! Мне кажется, чтобы понять взгляд на вашем лице, но это работает. Попробуйте!
Приведенные выше методы комбинируются, чтобы дать нам крест над решением браузера.

---

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

TOP краю CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> производителя <br/> просмотров: 1234 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

НИЖНИЙ краю CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> производителя <br/> просмотров: 1234 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

просмотреть демонстрацию здесь | Скачать здесь

---

Горизонтальное центрирование объекта просто достигается с краю собственности, установив края левого и правого края автоматическое

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

С надеждой, что когда-нибудь

• вертикальное выравнивание собственности в CSS будет работать, как это делается в ячейке таблицы, без того, чтобы бить много вокруг да около
• По крайней мере, установление разницы-топ: авто и разницы-дно: авто, как даст тот же результат, с краю левого и правого края набора для автоматического
• Браузер войны будет над некоторыми день.
• Там будет только один браузер для ВСЕХ.

Скачать CSS и HTML вышеуказанных решений здесь (Скачано 451 раз) .. для понятности, CSS не оптимизирована

PS: И, кстати, те эскизы некоторых фотографиях я щелкнул ...