Beart - alinierea verticală a lui div în css

Î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;
>

filmul nostru flash, de exemplu (nu știu o astfel de soluție, deoarece atunci când dimensiunea ferestrei browserului devine mai mică decât conținutul diva, browserul "mănâncă" o parte din conținutul din stânga și deasupra, ceea ce nu este bun pentru conținut sau logo-ul.)

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ă ...