Διάταξη CSS - Οριζόντια και κάθετη στοίχιση

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

    Εμφάνιση πίνακα περιεχομένων
▲ ▼
◀ ►

Center elements
horizontally and vertically

Στοιχεία στοίχισης στο κέντρο

Για να κεντράρετε οριζόντια ένα στοιχείο μπλοκ (όπως <div>), χρησιμοποιήστε το margin: auto;

Η ρύθμιση του πλάτους του στοιχείου θα το αποτρέψει από το να τεντωθεί μέχρι το άκρες του δοχείου του.

Στη συνέχεια, το στοιχείο θα καταλάβει το καθορισμένο πλάτος και τον υπόλοιπο χώρο θα κατανεμηθεί εξίσου στα δύο περιθώρια:

This div element is centered.

Παράδειγμα

.center
{
  margin: auto;
   
width: 50%;
   
border: 3px solid green;
  padding: 10px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p>Hello World!</p>
</div>

</body>
</html>

Σημείωση: Η στοίχιση στο κέντρο δεν έχει αποτέλεσμα εάν δεν έχει οριστεί η ιδιότητα width (ή ορίστε στο 100%).

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

Για να κεντράρετε απλώς το κείμενο μέσα σε ένα στοιχείο, χρησιμοποιήστε text-align: center;

This text is centered.

Παράδειγμα

.center {
  text-align: center;
  
border: 3px solid green;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>This text is centered.</p>
</div>

</body>
</html>

Συμβουλή: Για περισσότερα παραδείγματα σχετικά με τον τρόπο στοίχισης κειμένου, ανατρέξτε στο κεφάλαιο Κείμενο CSS.

Κεντράρετε μια εικόνα

Για να κεντράρετε μια εικόνα, ορίστε το αριστερό και το δεξί περιθώριο σε αυτόματο και μετατρέψτε το σε στοιχείο μπλοκ:

Paris

Παράδειγμα

img
{
  display: block;
    margin-left: auto;
  margin-right: auto;
  width: 40%;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

Ευθυγράμμιση αριστερά και δεξιά - Χρήση θέσης

Μία μέθοδος για την ευθυγράμμιση στοιχείων είναι η χρήση του position: absolute;:

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

Παράδειγμα

.right
{
  position: absolute;
   
right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the position property</h2>

<p>An example of how to right align elements with the position property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Σημείωση: Τα απόλυτα τοποθετημένα στοιχεία αφαιρούνται από την κανονική ροή και μπορεί να επικαλύπτουν στοιχεία.

Ευθυγράμμιση αριστερά και δεξιά - Χρησιμοποιώντας float

Μια άλλη μέθοδος για τη στοίχιση στοιχείων είναι η χρήση της ιδιότητας float:

Παράδειγμα

.right
{
  float: right;
   
width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the float property</h2>

<p>An example of how to right align elements with the float property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Το clearfix Hack

Σημείωση: Εάν ένα στοιχείο είναι ψηλότερο από το στοιχείο που το περιέχει και είναι floated, θα ξεχειλίσει έξω από το δοχείο του. Μπορείτε να χρησιμοποιήσετε το "clearfix hack" για να το διορθώσετε (δείτε παράδειγμα παρακάτω).

Χωρίς Clearfix

Με το Clearfix

Στη συνέχεια, μπορούμε να προσθέσουμε την αμυχή clearfix στο στοιχείο που περιέχει για επιδιόρθωση αυτό το πρόβλημα:

Παράδειγμα

 .clearfix::after {
  content: "";
  clear: both;
  
  display: table;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Κέντρο κατακόρυφα - Χρησιμοποιώντας padding

Υπάρχουν πολλοί τρόποι για να κεντράρετε ένα στοιχείο κάθετα στο CSS. Μια απλή λύση είναι να χρησιμοποιήσετε επάνω και κάτω επένδυση:

I am vertically centered.

Παράδειγμα

.center {
  padding: 70px 0;
  border: 3px solid 
green;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center vertically with padding</h2>

<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

Για να κεντράρετε κατακόρυφα και οριζόντια, χρησιμοποιήστε γεμίσεις και text-align: center:

I am vertically and horizontally centered.

Παράδειγμα

.center {
  padding: 70px 0;
  border: 3px solid 
green;
  text-align: center;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Center with padding and text-align</h2>

<p>In this example, we use padding and text-align to center the div element both vertically and horizontally:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Κέντρο Κάθετα - Χρησιμοποιώντας το ύψος γραμμής

Ένα άλλο κόλπο είναι να χρησιμοποιήσετε την ιδιότητα line-height με μια τιμή ίση στην ιδιότητα ύψος:

I am vertically and horizontally centered.

Παράδειγμα

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* If the text has multiple lines, add the 
following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Center with line-height</h2>

<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Κέντρο Κάθετα - Χρήση θέσης & μετασχηματισμού

Αν γεμίζει και line-height δεν είναι επιλογές, μια άλλη λύση είναι να χρησιμοποιήσετε την τοποθέτηση και την ιδιότητα transform:

I am vertically and horizontally centered.

Παράδειγμα

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  
position: absolute;
  top: 50%;
  
left: 50%;
  transform: translate(-50%, -50%);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Center with position and transform</h2>

<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Συμβουλή: Θα μάθετε περισσότερα σχετικά με την ιδιότητα μετασχηματισμού στους 2D Transforms μας Κεφάλαιο.

Κέντρο κατακόρυφα - Χρησιμοποιώντας το Flexbox

Μπορείτε επίσης να χρησιμοποιήσετε το flexbox για να κεντράρετε τα πράγματα. Απλώς σημειώστε ότι το flexbox δεν υποστηρίζεται στον IE10 και σε παλαιότερες εκδόσεις:

I am vertically and horizontally centered.

Παράδειγμα

 .center {
  display: flex;
  justify-content: center;
  
  align-items: center;
  height: 200px;
  border: 3px solid 
  green; 
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
</style>
</head>
<body>

<h2>Flexbox Centering</h2>

<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Συμβουλή: Θα μάθετε περισσότερα για το Flexbox στο Κεφάλαιό μας στο CSS Flexbox.