Mielőtt meg kellett küzdenie a CSS, hogy hozzon létre oldalelrendezéseket, összehangolva az egyes tartalmak belül egy táblázat cella tűnt csak gyerekjáték. Egyszerűen állítsa be az "align" vagy "valign" tulajdonság a tábla, hogy az összehangolás az Ön által kiválasztott, gyerekjáték!
A CSS elrendezés, bár van "vertical-align" tulajdonság az elem, nem tűnik olyan egyszerűnek, mint az "align" vagy "valign" tulajdonságok. Ahhoz, hogy több specifiic a "vertical-align:" Soha nem úgy tűnik, hogy megoldja minden gondját, különösen akkor, ha van írni egy darab cross-browser CSS.
Használata nélkül a HTML-táblázatok, a probléma az összpontosító tárgy, legyen az kép vagy valamilyen szöveget tartalmazó részlege belül, valószínűleg azóta minden UI / CSS fejlesztők rémálma egy bizonyos ponton. Ez a probléma további kivetítve gondjait történő összehangolása, ha az objektumot középre dinamikus jellegű, vagyis ha a magassága változó (ismeretlen magassága).
Bár nincs ismert megoldás, egyenesen előre, hogy fog működni az egész tartományban a böngészők meg kell foglalkozni, a megoldás, hogy én próbáltam megérkezni úgy tűnik, hogy működik a néhány böngészők Megpróbáltam azt (IE6, IE 7 , FF).
MEGOLDÁS:
A böngészők, mint a Mozilla, Opera és a Safari, a furcsa viselkedő "vertical-align" tulajdonság lehet hozni az érzékek, egyszerűen állítsa a "Display" tulajdona tartalmazó részleg "table-cell" (display: table-cell) .
A probléma még mindig az IE böngészők családja, aki még nem érti, mit a "table-cell" tulajdon és tudatlan, mint ők, akkor ne törődj vele. A megoldás az alábbiakban szerepel, bár egyszerű, hirdetések még néhány DOM elemet a HTML, hogy a dolgok történnek.
A CSS és HTML néz ki
.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/> nézetek: 3456 </ div>
</ Div>
</ Div>
Az eredmény így néz ki: -
megtekintéséhez a demó | Letöltés Source Files (Letöltve 448 alkalommal)
Megértése a megoldás: A böngészők érti display: table és display: table-cell tulajdonságokkal, akkor ritkán kell semmiféle magyarázatot. Az IE, a felhasználás egy IE specifikus hack (hash hack), akkor feltétlenül helyezze a tárgyat konténer (obj_container) fele a rendelkezésre álló magasságot. Ezután objektum (obj) belül van, és viszonylag pozíció áthelyezésre kerül fel a fele magasság ... Nos! Úgy tűnik, hogy megértsék a megjelenés az arcodon, de működik. Próbáld ki! A fenti technikák kombinálják, hogy megadja nekünk a fenti kereszt böngésző megoldást.
A CSS könnyen módosítható az alábbiak elérése, vertical-align: top vagy vertical-align: bottom TOP igazítás 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/> nézetek: 1234 </ div>
</ Div>
</ Div>
Az eredmény így néz ki: -
ALSÓ igazítás 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/> nézetek: 1234 </ div>
</ Div>
</ Div>
Az eredmény így néz ki: -
megtekintéséhez a demó | Letöltés itt
Vízszintes központosító a tárgy egyszerűen elért margin tulajdonság, ehhez a margin-left és margin-right auto Úgy tűnik, korok, mivel én kerestem egy ésszerű megoldást erre a beállítási hiba. De most ezzel a megoldással, úgy érzem, a békesség.
A remény, hogy egyszer majd
- függőleges igazítás tulajdonság a CSS-ben fog működni, mint ez a tábla sejt belsejébe, anélkül, hogy sokat verte az egész bokor
- Legalábbis, amelyben margin-top: auto és margin-bottom: auto, ad ugyanolyan eredmény, mint a margin-left és margin-right beállítása Auto
- A böngésző háborúk vége lesz egy napon.
- Ott majd csak egy böngészőben mindenki számára.
Töltse le a CSS és HTML a fenti megoldás van (Letöltve 448 alkalommal) .. az érthetőség, a CSS nem optimalizáltuk
PS: És egyébként is, ezek a miniatűrök néhány kép már kattintott ... 
