Alinierea textului și direcția textului în CSS
În acest capitol vei învăța despre aceste proprietăți: text-align, text-align-last, vertical-align, direction și unicode-bidi.
Alinierea textului
Proprietatea text-align setează alinierea orizontală a textului. Poate avea aceste valori:
left— aliniază textul la stânga.right— aliniază textul la dreapta.center— centrează textul.justify— întinde fiecare linie astfel încât toate liniile să aibă lățime egală.
Pentru textul de la stânga la dreapta, left este valoarea implicită; pentru textul de la dreapta la stânga, right este valoarea implicită.
Stânga, dreapta și centrat
Titlurile sunt centrate, aliniate la stânga și aliniate la dreapta.
Prompt
O pagină HTML care afișează alinierea textului la stânga, la dreapta și centrată.
Într-un bloc intern
<style>, centrează <h1>, aliniază la stânga <h2> și aliniază la dreapta <h3> folosind text-align. Adaugă un titlu de fiecare nivel.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Centered heading</h1>
<h2>Left-aligned heading</h2>
<h3>Right-aligned heading</h3>
</body>
</html>
Justificat
Cu justify, fiecare linie este întinsă astfel încât marginile din stânga și din dreapta se aliniază, ca într-un ziar.
Prompt
O pagină HTML care afișează text justificat.
Într-un bloc intern
<style>, setează un <div> la text-align: justify, astfel încât fiecare linie să fie întinsă la o lățime egală, ca într-un ziar. Pune un paragraf lung, cu mai multe propoziții, în interiorul div-ului.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
text-align: justify;
}
</style>
</head>
<body>
<div>
When the text-align property is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Alinierea ultimei linii
Proprietatea text-align-last setează modul în care este aliniată ultima linie a unui text. Poate avea una dintre aceste valori: auto (implicit), left, right, center, justify, start și end.
Exemplu
Ultima linie a trei paragrafe este aliniată la dreapta, centrată și justificată.
Prompt
O pagină HTML care afișează proprietatea text-align-last.
Într-un bloc intern
<style>, creează trei clase de paragraf: text-align-last right, center și justify. Dă fiecărui paragraf suficient text pentru a se întinde pe mai multe linii, astfel încât alinierea ultimei linii să fie vizibilă.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is aligned right.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is centered.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is justified.</p>
</body>
</html>
Alinierea verticală
Proprietatea vertical-align setează alinierea verticală a unui element. Poate avea una dintre aceste valori: baseline (implicit), o lungime sau un procent, sub, super, top, text-top, middle, bottom și text-bottom.
Exemplu
O imagine dintr-o linie de text este afișată cu mai multe valori vertical-align.
Prompt
O pagină HTML care afișează proprietatea vertical-align pentru imagini în interiorul unei linii de text.
Într-un bloc intern
<style>, creează cinci clase de imagini cu vertical-align: baseline, text-top, text-bottom, sub și super. Folosește imagini mici inline (un pătrat SVG sub formă de data URI) plasate în interiorul unei linii de text, astfel încât diferențele de aliniere verticală să fie vizibile.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 24px;
height: 24px;
}
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<p>An image with a baseline alignment: <img class="a" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a text-top alignment: <img class="b" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a text-bottom alignment: <img class="c" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a sub alignment: <img class="d" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a super alignment: <img class="e" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
</body>
</html>
Direcția textului
Proprietatea direction setează direcția de scriere în interiorul unui element de tip bloc.
Sfat: Folosește-o împreună cu proprietatea unicode-bidi pentru a susține text în mai multe limbi în același document.
Exemplu
Paragraful este setat să curgă de la dreapta la stânga.
Prompt
O pagină HTML care afișează direcția textului de la dreapta la stânga.
Într-un bloc intern
<style>, setează un <p> la direction: rtl și unicode-bidi: bidi-override, astfel încât textul să curgă de la dreapta la stânga. Adaugă un paragraf de text.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This paragraph runs from right to left.</p>
</body>
</html>
Proprietățile CSS de aliniere/direcție a textului
Un rezumat al proprietăților:
direction— setează direcția de scriere.text-align— setează alinierea orizontală a textului.text-align-last— setează modul în care este aliniată ultima linie a unui text.unicode-bidi— folosită împreună cudirectionpentru a susține mai multe limbi în același document.vertical-align— setează alinierea verticală a unui element.