Κόλπο: κεντράρετε μια απόλυτη θέση div

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

Περισσότερα από ένα άτομο με ρώτησαν πώς να κεντράρω ένα απόλυτα τοποθετημένο div και η απάντηση είναι πολύ απλή:

  1. Δίνουμε στο div ένα σταθερό πλάτος. Παράδειγμα: 500 εικονοστοιχεία
  2. Τοποθετούμε απολύτως το div με 50% αριστερά. Παράδειγμα: θέση: απόλυτο, αριστερά: 50%;
  3. Αφαιρούμε το μισό από αυτό που μετρά με το περιθώριο. Παράδειγμα: margin-left: -250px;

Το αποτέλεσμα είναι ένα τέλεια κεντραρισμένο, απόλυτα τοποθετημένο div.


15 σχόλια, αφήστε τα δικά σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   Ιβάν Λίρα dijo

    Σας ευχαριστώ πολύ .. όπως λέτε κάτι τόσο απλό και ότι παρά το πέρασμα του χρόνου εξακολουθεί να είναι ο συγγραφέας πολλών πονοκεφάλων.
    Η ανάρτησή σας ήταν πολύ χρήσιμη για μένα, σας ευχαριστώ πολύ.

  2.   φλούδα dijo

    Ευχαριστώ πολύ !!!

  3.   Γκλμπρόμαν dijo

    Καλή μου συνεισφορά, ευχαριστώ πολύ

  4.   ΛΟΥΚΑΣ dijo

    Τι φοβερό τρελό μου με εξυπηρέτησε: Δ

  5.   νικητής dijo

    Εξαιρετικά ευχαριστώ…

  6.   Βενιαμίν dijo

    Πολύ καλό Carlos.

  7.   Εικόνα placeholder Mario Lozano dijo

    Εξαιρετική πληροφορίες

  8.   Φρανκ Κοκ dijo

    Σας ευχαριστώ, με εξυπηρέτησε

  9.   στεμφύλων dijo

    Με έσωσες!!! Ευχαριστώ :)

  10.   Ντάνιελλοϋντ dijo

    Ευχαριστώ θείε, με βοήθησες πολύ !!, η έλλειψη φαντασίας μου.

  11.   Damian dijo

    Ευχαριστώ πολύ !!!!! αυτό το κόλπο με βοηθά πάντα χαχα

  12.   o dijo

    ευχαριστώ πολύ, εξαιρετικό φίλο

  13.   Chrismart Anji dijo

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

    απόλυτος;
    αριστερά: 50%;
    περιθώριο-αριστερά: -100 εικονοστοιχεία;

    αυτό θα ήταν μισό.

  14.   Edgar cjuno dijo

    Η συνεισφορά εκτιμάται, με βοήθησε πραγματικά, χαιρετισμούς!

  15.   Μίριαμ Τζες dijo

    Η πολύ καλή συνεισφορά με βοήθησε πολύ, χίλια χάρη!