Aliniere CSS. Centru vertical - Folosire line-height. Centru vertical - Folosire position și transform.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Un alt truc este să folosiți proprietatea line-height cu o valoare egală cu proprietatea height.
Exemplu:
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* Dacă textul are mai multe linii, adăugați următoarele: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Centru vertical - Folosire position și transform
Dacă padding și line-height nu sunt opțiuni, o a treia soluție este utilizarea poziționării și a proprietății de transformare:
Notă: Proprietatea trasform nu este acceptată în versiunile IE8 și anterioare.
Exemplu:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}