Висловлюючи 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>

Результат виглядає наступним чином: -

переглянути демонстрацію тут | Завантажити вихідних файлів (Скачано 452 раз)

---

Розуміння рішення:
Для браузерів, які розуміють, дисплей: стіл і дисплей: властивості елементу таблиці, він рідко має потребу в поясненні. Для 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 вищевказаних рішень тут (Скачано 452 раз) .. для зрозумілості, CSS не оптимізована

PS: І, до речі, ті ескізи деяких фотографіях я клацнув ...