Un text poate fi adăugat cu ușurință oriunde, dar fără aliniere, poate părea neprezentabil și mai puțin atractiv. Textul nealiniat poate perturba, de asemenea, întregul aspect al unei pagini web. Pentru a aborda astfel de lucruri în aplicațiile web, putem folosi câteva proprietăți utile ale CSS care vă vor ajuta să aliniați textele în cel mai scurt timp.
Acest articol va demonstra cum să aliniați textul vertical în CSS.
Cum să aliniezi textul pe verticală în CSS?
În CSS, puteți folosi proprietățile de mai jos pentru a alinia textul pe verticală:
-
- proprietatea înălțimii liniei
- afișează și aliniază proprietățile elementelor
Acum, să parcurgem fiecare metodă una câte una!
Metoda 1: Utilizarea proprietății line-height pentru a alinia textul pe verticală în CSS
„ inaltimea liniei ” proprietate specifică zona de dedesubt și elementele în linie în sus. Setează distanța unui text față de alte elemente. Folosind proprietatea line-height, textul poate fi ușor aliniat vertical la mijloc.
Exemplu
Iată un text în interiorul unei casete (chenar) aflată în prezent în partea stângă sus. Să aliniem acest text la centru vertical și orizontal:
Acum să trecem la următoarea metodă. „ Flexbox ” este un aspect unidimensional care vă permite să formatați HTML. De asemenea, îl puteți utiliza pentru a alinia elementele vertical sau orizontal. Deci, să luăm un exemplu și să aliniem un text pe verticală cu ajutorul casetei flexibile. Exemplu În primul rând, vom face containerul nostru flexibil prin stabilirea valorii „ afişa „proprietate ca „ contracta ”. Apoi, utilizați „ alinierea elementelor ” proprietate pentru setarea conținutului în centru pe verticală. Mai mult, pentru a alinia conținutul în centru pe orizontală, „ justifica-conținut ” proprietatea va fi folosită: În CSS, textul poate fi ușor aliniat vertical cu ajutorul „ inaltimea liniei ” proprietate. De asemenea, puteți utiliza „ flexbox „ pentru alinierea verticală a textului cu „ afişa ' și ' alinierea elementelor ” proprietăți. Flexbox este un aspect unidimensional și este utilizat pur și simplu pentru alinierea verticală sau orizontală a articolelor. Această postare a oferit două cele mai simple metode care vă pot ajuta să aliniați textul vertical în CSS.
Pentru a face acest lucru, adăugați un container „
Cel mai bun site educațional !
div >
Cutia este formată folosind un „ 3px „granița și” 250px „ înălțime. „ marimea fontului „proprietatea este folosită cu valoarea „ 24px ” pentru a face vizibil fontul. Vom atribui div a „ inaltimea liniei ' de ' 250px ” pentru alinierea textului său vertical în mijloc. În continuare, vom folosi „ aliniere text ” proprietate pentru a alinia textul în centru:
înălțimea liniei: 250px;
text-align: centru;
dimensiunea fontului: 24px;
înălțime: 250px;
chenar: 3px solid;
}
După cum puteți vedea, textul a fost aliniat vertical la centru folosind înălțimea liniei și orizontal la centru cu proprietatea text-align. Metoda 2: Utilizarea proprietății de afișare și aliniere a elementelor pentru a alinia textul pe verticală în CSS
afişa: contracta ;
alinierea elementelor: centru;
justificare-conținut: centru;
dimensiunea fontului: 24px;
înălțime: 200px;
chenar: 3px solid;
}
Textul specificat a fost aliniat la centru cu succes:
Am oferit metode legate de alinierea verticală a textului în CSS. Concluzie