Înainte de a avea de a face cu CSS pentru a crea machete noastre de pagină, alinierea parte a conţinutului în interiorul unei celule de tabel părea juca doar copil. Pur şi simplu setaţi "alinia" sau "valign" proprietate a tabelului pentru a avea alinierea la alegere, bucata de tort!
Cu aspecte CSS, deşi avem "vertical-align" proprietate pentru elemente, nu pare a fi la fel de simplu ca "alinierea" sau "valign" proprietăţi. Pentru a fi mai specifiic "vertical-align" nu pare să rezolve niciuna dintre problemele tale, mai ales în cazul în care se scrie o bucata de cross-browser CSS.
Fără utilizarea de tabele HTML, problema de centrare pe obiect, fie o imagine sau un text într-o divizie de conţinut, probabil a fost de fiecare UI / CSS coşmar dezvoltatorii la un moment dat. Această problemă se extrapolează în continuare de grijile de aliniere, în cazul în care obiectul care urmează să fie centrat este dinamic în natură, adică atunci când înălţimea acestuia este variabilă (înălţimea necunoscut).
Deşi nu există o soluţie cunoscut drept înainte, că ar lucra în gama de browsere pe care le avem de a face cu, soluţia pe care am încercat să ajungă la nu pare să funcţioneze în browserele cateva pe care eu l-am încercat în (IE6, IE 7 , FF).
SOLUTIE:
În browsere, cum ar fi Mozilla, Opera şi Safari, comportă ciudat "vertical-align" proprietate poate fi adus la simţurile sale, pur şi simplu prin stabilirea de "afişare" a diviziei de proprietate conţinând la "masa-celula" (afişare: masă de celule) .
Problema rămâne în continuare cu familia IE browsere, care, dar nu par să înţeleagă ce sa cu "masa de celule" de proprietate şi de ignorant cum sunt, ele ignora pur şi simplu. Soluţia de mai jos, deşi simple, anunturi câteva elemente mai DOM HTML la pagina dumneavoastră de a face lucrurile sa se intample.
CSS şi HTML arata ca acest
.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/> vizualizări: 3456 </ div>
</ Div>
</ Div>
Rezultatul arata ca aceasta: -
vezi demo aici | Files download source (Descarcat de 450 ori)
Înţelegerea soluţia: Pentru browserele care inteleg de afişare: masă şi de afişare: masa de celule proprietăţi, are nevoie de nici o explicaţie foarte rar. Pentru IE, cu utilizarea unui hack IE specific (hack hash), am absolut poziţionaţi recipientul obiect (obj_container), în jumătate din înălţimea disponibile. Apoi, obiect (obj) este în poziţie relativ şi este mutat de jumătate din înălţimea sa ... bine! Am par să înţeleagă aspectul pe fata ta, dar funcţionează. Încercaţi să-l! Tehnicile de mai sus sunt combinate pentru a ne da soluţia de mai sus browser-ul cruce.
CSS poate fi uşor modificate pentru a realiza ca de mai jos, vertical-align: top sau vertical-align: partea de jos TOP Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>
Rezultatul arata ca aceasta: -
JOS Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>
Rezultatul arata ca aceasta: -
vezi demo aici | Descarcă de aici
Orizontală centrare a obiectului pur şi simplu, realizat cu marja de proprietate, prin stabilirea marjei de stânga şi de marja de-dreptul la auto Se pare ca varsta, deoarece am fost încercarea de a găsi o soluţie rezonabilă pentru această problemă de aliniere. Dar acum, cu această soluţie, mă simt la pace puţin.
Cu o speranta ca intr-o zi
- vertical-aliniere proprietate în CSS va funcţiona ca o face in interiorul unei celule de tabel, fără să bată mai mult în jurul lui Bush
- Cel puţin, stabilirea marjei de-top: auto si margin-bottom: auto, ca va da acelaşi rezultat ca şi cu marja de stânga şi de setul de marja de-a dreptul de auto
- Războaiele browser va fi peste o zi.
- Nu va fi doar un browser de ALL.
Descărcaţi CSS şi HTML de soluţie de mai sus, aici (Descarcat de 450 ori) .. pentru inteligibilităţii, CSS nu este optimizat
PS: Si apropo, cei care sunt miniaturi ale unor poze le-am dat clic pe ... 
