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

Ευθυγράμμιση στην 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;
}

Αποτέλεσμα

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

 

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

Παράδειγμα

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

Text-align

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

Παράδειγμα

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

Αποτέλεσμα

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

Position

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

Παράδειγμα

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

Αποτέλεσμα

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

Float

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

Παράδειγμα

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

Αποτέλεσμα

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

Padding

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

Παράδειγμα

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

Αποτέλεσμα

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

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

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.