În primul rând, această întrebare este împărțită în două întrebări. În primul rând, cum să aliniem div sau orice alt element vertical în browser și, în al doilea rând, cum să aliniem ceva, de exemplu, textul în diva. Să mergem în ordine.
De asemenea, este demn de remarcat că încă nu știu cum să aliniem vertical diva, care ar funcționa fără pete în toate browserele.
Alinierea divului în centru pe verticală
Există 2 moduri, absolut și relevante. De exemplu, pentru a centraliza
, în care lățimea înălțimii este de 100% și indicele este setat la zero, scriem:div # fond fundal: #CCC; / * pentru claritate * /
lățime: 300px;
înălțime: 200px;
poziția: absolută;
top: 50%;
stânga: 50%;
margin-top: -100px;
margin-stânga: -150px;
>
div # Fundal splash: #CCC; / * pentru claritate * /
lățime: 50%;
înălțime: 50%;
poziția: absolută;
top: 25%;
stânga: 25%;
>
De data aceasta pentru poziționarea blocului folosim doar coordonatele colțului stânga sus. Se scade din înălțimea totală a blocului exterior (la începutul articolului a fost decis că aceasta ar fi
) înălțimea blocului centrat (100% - 50% = 50%). împărțiți-l în jumătate și obțineți partea superioară: 25%. De asemenea, introducem lățimea și indentarea din stânga (în exemplul: stânga: 25%).Aliniați textul în diva
După cum știe toată lumea, în toate browserele normale (nu IE.) Funcționează:
Pentru următorul cod, de exemplu:
- Text ce trebuie centrat pe verticală ...
Dar în IE (ca în 5,6, și în 7-8) încep tot felul de perversiuni diferite. Ele se bazează fie pe poziții și procente relevante, fie pe expresia java. Din păcate, nici una dintre aceste metode de aliniere a div în IE nu poate fi numită ideală, cu toate acestea, nu există alte alternative.
- div
- înălțime: 200px;
- afișare: celule de masă;
- vertical-aliniere: mijloc;
- >
- div p
- margin-top: expresie ((parentNode.offsetHeight - this.offsetHeight)<0. «0″. (parentNode.offsetHeight — this.offsetHeight)/2 + «px»)
- >
- Text ce trebuie centrat pe verticală ...
lenzi, e profondissima quiete
infinito silenzio a questa voce în comparație:
- .împacheta
- afișare: celule de masă;
- vertical-aliniere: mijloc;
- lățime: 100%;
- înălțime: 401px;
- >
- .doar-pentru-IE
- afișare: niciunul;
- lățime: 1px;
- margin-stânga: -1px;
- >
- * html .just-pentru-IE, * html .valign-center
- afișare: inline-block;
- vertical-aliniere: mijloc;
- >
- * html .valign-center
- lățime: 100%;
- >
- * html. just-for-IE
- înălțime: 100%;
- >
- * html .just-pentru-IE, * html .valign-center
- afișare: inline;
- >