Aliniere verticală în diva

Se întâmplă adesea că doriți să aliniați textul pe marginea de jos sau în mijlocul blocului. Se pare că este simplu: specificați pentru afișarea DIV: table-cell și vertical-align: middle (sau jos), dar IE nu înțelege valoarea celulei tabelă pentru proprietatea de afișare. Trebuie să ieși.







Soluția problemei pentru alinierea la partea inferioară și mijlocul blocului este puțin diferită, dar pe baza aceluiași principiu: poziționarea unui element de linie într-un bloc.

Alinierea la marginea inferioară.

Pentru a alinia textul de la marginea inferioară a elementului bloc, trebuie să setați blocul de poziționare relativ, să introduceți textul în eticheta SPAN și să-l setați la poziția absolută:







Această metodă funcționează bine în toate browserele și nu necesită nici un hack sau comentarii condiționate.

Aliniere în mijlocul blocului

În acest caz, avem nevoie de un alt SPAN. Primul SPAN va plasa textul despre mijloc, iar al doilea va ridica textul la jumătate din înălțimea acestuia.

Dar acest lucru funcționează numai în Internet Explorer, deoarece gestionează proprietatea de top într-un mod special. Pentru compatibilitatea cu browserul încrucișat al codului nostru, va trebui să recurgem la comentarii condiționate pentru IE, iar pentru restul browserelor folosiți afișarea: table-cell și vertical-align: middle. Aici este codul complet pentru toate browserele:

Apropo, dacă trebuie să aliniați textul și pe orizontală, adăugați următoarele la descrierea stilului pentru eticheta SPAN:

Acum puteți alinia textul orizontal cu proprietatea text-align pentru eticheta SPAN.

Cel mai bun hosting și VPS:







Articole similare

Trimiteți-le prietenilor: