Vyjadrenie IT

Než sme sa museli vysporiadať s CSS vytvoriť naše rozloženie stránky, zarovnanie nejaký obsah vnútri bunky tabuľky zdalo Proste hračkou. Stačí zadať "zladiť" alebo "valign" vlastnosť tabuľky majú zarovnanie podľa vášho výberu, kúsok torty!
S rozvrhnutie CSS, keď máme "vertical-align" vlastnosť prvkov, sa nezdá byť tak jednoduché, ako "zladiť" alebo "valign" vlastností. Chcete byť viac konkrétny "vertical-align" nikdy sa zdá k riešeniu niektorý z vašich problémov, najmä ak sú napísať kus cross-browser CSS.

Bez použitia HTML tabuliek, problém sa sústrediť na objekte, či už je to nejaký obrázok alebo text v obsahujúci divízie, bol pravdepodobne každý UI / CSS vývojári nočná mora, na nejakom mieste. Tento problém ďalej extrapoluje svoje starosti v prispôsobení, ak je objekt, ktorý sa uprostred je dynamický charakter, tj keď jeho výška je premenlivá (neznáme výška).

Hoci neexistuje žiadna známa priamočiare riešenie, ktoré bude pracovať v celej rade prehliadačov, ktoré musíme riešiť, riešenie, ktoré som sa snažil prísť k sa zdá pracovať v niekoľkých prehliadačoch, ktoré som sa snažil ho (IE6, IE 7 , FF).

RIEŠENIE:
V prehliadačoch, ako je Mozilla, Opera a Safari divne chová "vertical-align" majetok môže byť podaná k rozumu, jednoducho nastavením "display" vlastnosť obsahujúce divízie "stolové bunky" (display: table-cell) .

Problémom stále zostáva s IE rodiny prehliadačov, ktorý, ale nezdá sa, že pochopili, čo majú s "table-cell" majetku a nevedomým, ako sú, jednoducho ignorovať. Riešenie uvedené nižšie, hoci jednoduchý, inzeráty niekoľkých viac DOM elementy do HTML robiť veci sa stávajú.

CSS a HTML vyzerá 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ýsledok vyzerá takto: -

Pozrite sa na demo tu záložky | na stiahnutie Zdrojové súbory (stiahnuté 454 krát)

---

Princípy riešenia:
Pre prehliadače, ktoré chápu display: table a display: table-bunky vlastnosti, málokedy nepotrebuje vysvetlenie. Pre IE, s použitím IE špecifický hack (hash hack), sme absolútne umiestnenie objektu kontajnera (obj_container) v polovici výšky k dispozícii. Potom objekt (obj) do pozície je relatívne a je posunula o polovicu jeho výšky ... No! Zdá sa mi pochopiť pohľad na tvári, ale funguje to. Skúste to!
Vyššie uvedené postupy sú kombinované, aby nám nad krížovou prehliadača riešenie.

---

CSS je možné ľahko modifikovať nižšie dosiahnuť, vertical-align: top alebo vertical-align: bottom

TOP Zarovnanie 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ýsledok vyzerá takto: -

SPODNÁ Zarovnanie 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ýsledok vyzerá takto: -

Pozrite sa na demo tu | Na stiahnutie tu

---

Horizontálne vycentrovanie objektu jednoducho dosiahnuť s maržou majetku nastavením margin-left a margin-právo na auto

Vyzerá to, že starne, pretože som sa snažil nájsť rozumné riešenie tohto problému zarovnanie. Ale teraz s týmto riešením, sa cítim trochu pokoja.

S nádejou, že jedného dňa

• Vertikálne zarovnanie CSS majetok bude fungovať podobne ako to robí vo vnútri bunky tabuľky, bez toho aby museli poraziť oveľa okolo horúcej kaše
• Aspoň, nastavenie margin-top: auto a margin-bottom: auto, dá rovnaký výsledok ako pri margin-left a margin-right nastavený na automatické
• Vojne prehliadačov bude po nejaký deň.
• K dispozícii bude len jeden prehliadač pre všetkých.

Stiahnite si CSS a HTML vyššie uvedené riešenie tu (stiahnuté 454 krát) .. na zrozumiteľnosti, je CSS nie je optimalizovaná

PS: A mimochodom, to sú náhľady niektorých obrázkov som klikli ...