Než jsme se museli vypořádat s CSS vytvořit naše rozložení stránky, zarovnání nějaký obsah uvnitř buňky tabulky zdálo Prostě hračkou. Stačí zadat "sladit" nebo "valign" vlastnost tabulky mají zarovnání podle vašeho výběru, kousek dortu!
S rozvržení CSS, když máme "vertical-align" vlastnost prvků, se nezdá být tak jednoduché, jak "sladit" nebo "valign" vlastností. Chcete být více konkrétni "vertical-align" nikdy se zdá k řešení některý z vašich problémů, zejména pokud jsou napsat kus cross-browser CSS.
Bez použití HTML tabulek, problém se soustředit na objektu, ať už je to nějaký obrázek nebo text v obsahující divize, byl pravděpodobně každý UI / CSS vývojáři noční můra, na nějakém místě. Tento problém dále extrapoluje své starosti v přizpůsobení, je-li objekt, který se uprostřed je dynamický charakter, tj. když jeho výška je proměnlivá (neznámé výška).
Ačkoli neexistuje žádná známá přímočaré řešení, které bude pracovat v celé řadě prohlížečů, které musíme řešit, řešení, které jsem se snažil přijít k se zdá pracovat v několika prohlížečích, které jsem se snažil ho (IE6, IE 7 , FF).
ŘEŠENÍ:
V prohlížečích, jako je Mozilla, Opera a Safari divně chová "vertical-align" majetek může být podána k rozumu, jednoduše nastavením "display" vlastnost obsahující divize "stolní buňky" (display: table-cell) .
Problémem stále zůstává s IE rodiny prohlížečů, který, ale nezdá se, že pochopili, co mají s "table-cell" majetku a nevědomým, jak jsou, prostě ignorovat. Řešení uvedeny níže, byť jednoduchý, inzeráty několika více DOM elementy do HTML dělat věci se stávají.
CSS a HTML vypadá takto
.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/> zobrazení: 3456 </ div>
</ Div>
</ Div>
Výsledek vypadá takto: -
Podívejte se na demo zde záložky | ke stažení Zdrojové soubory (staženo 452 krát)
Principy řešení: Pro prohlížeče, které chápou display: table a display: table-buňky vlastnosti, málokdy nepotřebuje vysvětlení. Pro IE, s použitím IE specifický hack (hash hack), jsme absolutně umístění objektu kontejneru (obj_container) v polovině výšky k dispozici. Pak objekt (obj) do pozice je relativně a je posunula o polovinu jeho výšky ... No! Zdá se mi pochopit pohled na obličeji, ale funguje to. Zkuste to! Výše uvedené postupy jsou kombinovány, aby nám nad křížovou prohlížeče řešení.
CSS lze snadno modifikovat níže dosáhnout, vertical-align: top nebo vertical-align: bottom TOP Zarovnání 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>
Výsledek vypadá takto: -
SPODNÍ Zarovnání 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>
Výsledek vypadá takto: -
Podívejte se na demo zde | Ke stažení zde
Horizontální vycentrování objektu jednoduše dosáhnout s marží majetku nastavením margin-left a margin-právo na auto Vypadá to, že stárne, protože jsem se snažil najít rozumné řešení tohoto problému zarovnání. Ale teď s tímto řešením, se cítím trochu klidu.
S nadějí, že jednoho dne
- Vertikální zarovnání CSS majetek bude fungovat podobně jako to dělá uvnitř buňky tabulky, aniž by museli porazit mnohem kolem horké kaše
- Alespoň, nastavení margin-top: auto a margin-bottom: auto, dá stejného výsledku jako u margin-left a margin-right nastaven na automatické
- Válce prohlížečů bude po nějaký den.
- K dispozici bude pouze jeden prohlížeč pro všechny.
Stáhněte si CSS a HTML výše uvedené řešení zde (staženo 452 krát) .. pro srozumitelnosti, je CSS není optimalizována
PS: A mimochodem, to jsou náhledy některých obrázků jsem klikli ... 
