Ευθυγράμμιση στην CSS (CSS align)

Ευθυγράμμιση στην CSS

Για να ορίσουμε την οριζόντια ή την κάθετη θέση των στοιχείων μιας ιστοσελίδας, χρησιμοποιούμε τις ιδιότητες για την ευθυγράμμιση στην CSS. Η CSS περιλαμβάνει πολλές επιλογές ιδιοτήτων για τον ορισμό της θέσης ή της ευθυγράμμισης ενός στοιχείου.

Σημαντικές ιδιότητες της CSS για την οριζόντια και την κάθετη ευθυγράμμιση είναι οι εξής:

margin
text-align
position
float
padding
transform

Margin

Με την ιδιότητα margin ορίζουμε την οριζόντια ευθυγράμμιση ενός στοιχείου μπλοκ (block element). Αν θέλουμε να είναι στο κέντρο ορίζουμε την τιμή auto. Η ρύθμιση του πλάτους του στοιχείου είναι απαραίτητη για να λειτουργήσει η ιδιότητα και θα το αποτρέψει από το να τεντώνεται προς τις άκρες του στοιχείου που το περιέχει. Με αυτό τον τρόπο το στοιχείο παίρνει το επιθυμητό πλάτος και το υπόλοιπο διάστημα θα μοιραστεί ισόποσα μεταξύ των δύο περιθωρίων.

Παράδειγμα

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

Αποτέλεσμα

Όταν θέλουμε να κεντράρουμε μία εικόνα, χρησιμοποιούμε την ιδιότητα margin, αφού χρησιμοποιήσουμε την ιδιότητα display με την τιμή block.

Παράδειγμα

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

Text-align

Με την ιδιότητα text-align ορίζουμε την οριζόντια ευθυγράμμιση του κειμένου ενός στοιχείου. Για να το ευθυγραμμίσουμε στο κέντρο χρησιμοποιούμε την τιμή center.

Παράδειγμα

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

Αποτέλεσμα

Position

Άλλη μία ιδιότητα είναι η position και ορίζουμε την τιμή absolute.

Παράδειγμα

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

Αποτέλεσμα

Float

Επίσης μπορούμε να χρησιμοποιήσουμε τη ιδιότητα float για την ευθυγράμμιση των στοιχείων.

Παράδειγμα

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

Αποτέλεσμα

Padding

Άλλη μία ιδιότητα για την οριζόντια ή την κάθετη ευθυγράμμιση στοιχείων είναι η padding.

Παράδειγμα

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

Αποτέλεσμα

Transform

Μπορούμε επίσης να χρησιμοποιήσουμε την ιδιότητα transform. Αυτή η ιδιότητα συνδυάζεται με την ιδιότητα position.

Παράδειγμα

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Αποτέλεσμα

Ευθυγράμμιση στην CSS (CSS align)