Στοίχιση κειμένου CSS και κατεύθυνση κειμένου

Πίνακας περιεχομένων

Στοίχιση κειμένου και κατεύθυνση κειμένου

Σε αυτό το κεφάλαιο θα μάθετε για τις ακόλουθες ιδιότητες:

text-align
text-align-last
direction
unicode-bidi
vertical-align

Ευθυγράμμιση κειμένου

Η ιδιότητα text-align χρησιμοποιείται για τον ορισμό της οριζόντιας στοίχισης ενός κειμένου.

Ένα κείμενο μπορεί να είναι στοίχιση αριστερά ή δεξιά, στο κέντρο ή να αιτιολογείται.

Το παρακάτω παράδειγμα δείχνει κείμενο στοίχιση στο κέντρο και αριστερή και δεξιά στοίχιση (Η αριστερή στοίχιση είναι προεπιλογή εάν η κατεύθυνση του κειμένου είναι από αριστερά προς τα δεξιά και δεξιά Η στοίχιση είναι προεπιλεγμένη εάν η κατεύθυνση κειμένου είναι από δεξιά προς τα αριστερά):

Παράδειγμα

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>

Όταν η ιδιότητα text-align έχει οριστεί σε "justify", κάθε γραμμή είναι τεντωμένο έτσι ώστε κάθε γραμμή να έχει ίσο πλάτος και το αριστερό και το δεξί περιθώριο είναι κατευθείαν (όπως σε περιοδικά και εφημερίδες):

Παράδειγμα

div {
  text-align: justify;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<h1>Example text-align: justify</h1>

<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>

<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>

</body>
</html>

Στοίχιση κειμένου τελευταίο

Η ιδιότητα text-align-last καθορίζει τον τρόπο στοίχισης της τελευταίας γραμμής ενός κειμένου.

Παράδειγμα

Ευθυγραμμίστε την τελευταία γραμμή κειμένου σε τρία στοιχεία <p>:

 p.a
{
   
text-align-last: right;
}
p.b
{
   
text-align-last: center;
}
p.c
{
    text-align-last: justify;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}
</style>
</head>
<body>

<h1>The text-align-last Property</h1>

<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body>
</html>

Κατεύθυνση κειμένου

Η κατεύθυνση και Οι ιδιότητες unicode-bidi μπορούν να χρησιμοποιηθούν για την αλλαγή της κατεύθυνσης κειμένου ενός στοιχείου:

Παράδειγμα

 p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>

<p class="ex1">This is right-to-left text direction.</p>

</body>
</html>

Κατακόρυφη στοίχιση

Η ιδιότητα vertical-align ορίζει την κατακόρυφη στοίχιση ενός στοιχείου.

Παράδειγμα

Ορίστε την κατακόρυφη στοίχιση μιας εικόνας σε ένα κείμενο:

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
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>

<h1>The vertical-align Property</h1>

<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p> 

<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p> 

<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>

<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p> 

<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>

</body>
</html>

Οι ιδιότητες στοίχισης/κατεύθυνσης κειμένου CSS

direction: Καθορίζει την κατεύθυνση του κειμένου/την κατεύθυνση γραφής
text-align: Καθορίζει την οριζόντια στοίχιση του κειμένου
text-align-last: Καθορίζει τον τρόπο στοίχισης της τελευταίας γραμμής ενός κειμένου
unicode-bidi: Χρησιμοποιείται μαζί με την ιδιότητα κατεύθυνσης για να ορίσετε ή να επιστρέψετε εάν το κείμενο θα πρέπει να παρακαμφθεί για την υποστήριξη πολλών γλωσσών στο ίδιο έγγραφο
vertical-align: Ορίζει την κατακόρυφη στοίχιση ενός στοιχείου