Ga izražava

Prije nego što smo morali nositi sa CSS-om za stvaranje naše izgleda stranice, poravnavanje neki sadržaj unutar ćelije tablice činilo samo dječja igra. Jednostavno postavite "poravnati" ili "valign" vlasništvo stolom za poravnanje po vašem izboru, komad torte!
S CSS rasporedima, iako imamo "vertikalna-align" svojstvo elemenata, to ne činiti se biti kao jednostavan kao "poravnavanje" ili "valign svojstva". Da bi se više specifiic "okomiti-align" nikad ne izgleda kao da se riješi bilo koji od vaših problema, pogotovo ako se napisati komad cross-preglednik CSS.

Bez korištenja HTML tablicama, Problem sa središtem na objektu, bilo da je slika ili neki tekst unutar sadrže podjele, je vjerojatno bio svaki UI / CSS developera noćna mora u nekom trenutku. Ovaj problem se dodatno extrapolates svoje brige usklađivanja, ako se objekt u središtu je dinamičan u prirodi, tj. kada njegova visina je promjenjiva (nepoznata visina).

Iako ne postoji poznati ravno naprijed rješenje koje će raditi preko raspon preglednicima moramo baviti, rješenje da sam pokušao doći do čini se da rade u nekoliko preglednicima da sam ga pokušao u (IE6, IE 7 , FF).

RJEŠENJE:
U preglednicima kao što su Mozilla, Opera i Safari, čudno ponašaju "okomiti-align" imovina može dovesti k pameti, jednostavno postavljanjem "pokazivati" svojstvo sadrže podjele na "stol-stanice" (display: table-cell) .

Problem i dalje ostaje s obitelji IE preglednika, koji je, još uvijek ne čini se da razumjeti što sa "Tablica stanica" imovine i neznanju kao što su oni, oni su samo ga ignorirati. Rješenje dano u nastavku, iako jednostavne, oglasi nekoliko više DOM elemenata u HTML kako bi se stvari događaju.

CSS i HTML izgleda ovako
.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/> Views: 3456 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

prikaz demo ovdje se | download source Files (Downloaded 451 puta)

---

Razumijevanje rješenje:
Za preglednike koji razumiju Display: stol i display: table-cell svojstva, rijetko treba objašnjenje. Za IE, uz primjenu specifičnih IE hack (hack hash), mi apsolutno Smjestite objekt (kontejner obj_container) u polovici dostupne visine. Zatim objekt (obj) u je pozicija relativno i popela na pola svoje visine ... Pa! Čini mi se da razumjeti pogled na vaše lice, ali to radi. Probajte!
Navedene tehnike se kombiniraju kako bi nam gore križ preglednik rješenje.

---

CSS može biti lako modificirana kao ispod kako bi se postigla, okomito-align: top ili vertikalno-align: dno

TOP Poravnaj 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/> stajališta: 1234 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

DONJA Poravnaj 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/> stajališta: 1234 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

prikaz demo ovdje | Preuzmite ovdje

---

Horizontalna centriranje objekta jednostavno postići s margine imovine, marže postavljanjem i lijevi rub-pravo na auto

Činiti se poput dobi, budući da sam pokušava pronaći razumno rješenje ovog problema poravnanje. Ali sada s ovim rješenjem, osjećam se kao kod malo mira.

Uz nadu da će jednog dana

• vertikalnom usklađivanje imovine u CSS će raditi kao da se u ćeliji tablice, bez da tuku čak oko grma
• Barem, postavljanje margina-top: Auto-bottom margin: auto, dat će isti rezultat kao što je s margina-lijevi i desni rub postavljeni na auto
• Ratovi preglednik će biti više od jednog dana.
• Tu će se samo jedan browser za sve.

Preuzmite CSS and HTML iz gornjeg rješenja ovdje (Downloaded 451 puta) .. za razumljivosti, CSS nije optimizirana

PS: I usput, to su sličice nekih slika sam kliknuo ...