Trik: vycentrujte absolútnu pozíciu div

V CSS si niekedy komplikujeme život jednoduchými vecami, ktoré sú menej komplikované, ako si myslíme, a že keď vidíme riešenie, pri pozorovaní takýchto anekdot sa takmer smejeme.

Nejedna osoba sa ma pýtala, ako vycentrovať absolútne umiestneného diva, a odpoveď je veľmi jednoduchá:

  1. Divu dáme pevnú šírku. Príklad: 500px
  2. Absolútne umiestnime div s 50% doľava. Príklad: pozícia: absolútna; vľavo: 50%;
  3. Od marže odrátame polovicu toho, čo meria. Príklad: margin-left: -250px;

Výsledkom je dokonale vycentrovaný, absolútne umiestnený div.


Zanechajte svoj komentár

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *

*

*

  1. Zodpovedný za údaje: Miguel Ángel Gatón
  2. Účel údajov: Kontrolný SPAM, správa komentárov.
  3. Legitimácia: Váš súhlas
  4. Oznamovanie údajov: Údaje nebudú poskytnuté tretím stranám, iba ak to vyplýva zo zákona.
  5. Ukladanie dát: Databáza hostená spoločnosťou Occentus Networks (EU)
  6. Práva: Svoje údaje môžete kedykoľvek obmedziť, obnoviť a vymazať.

  1.   Ivan Lira dijo

    Ďakujem pekne .. ako hovoríte niečo také jednoduché a že aj napriek času je stále autorom mnohých bolestí hlavy.
    Váš príspevok bol pre mňa veľmi užitočný, ďakujem pekne.

  2.   klas dijo

    Ďakujem mnohokrát !!!

  3.   glbroman dijo

    Dobrý príspevok mi veľmi pomohol, ďakujem

  4.   LUCASG dijo

    Aký veľký blázon mi poslúžil: D

  5.   víťaz dijo

    Vynikajúca vďaka ...

  6.   Benjamín dijo

    Veľmi dobrý Carlos.

  7.   Zástupný obrázok pre Mario Lozano dijo

    vynikajuce info

  8.   Frank Koq dijo

    Ďakujem, poslúžilo mi to

  9.   marc dijo

    Zachránil si ma!!! Ďakujem :)

  10.   Danielfloyd dijo

    Ďakujem strýko, veľmi mi to pomohlo !!, ten môj nedostatok fantázie.

  11.   Damian dijo

    Ďakujem mnohokrát !!!!! tento trik mi vždy pomôže haha

  12.   o dijo

    ďakujem pekne vynikajúci priateľ

  13.   Chrismart Anji dijo

    Toto nie je vycentrované, všetko závisí od pôvodnej veľkosti základného prvku div, ktorý necháme narásť v závislosti od toho, čo je vložené dovnútra. Pre mňa bolo užitočnejšie použiť toto ako vizuálne, ak to vidím ešte viac vycentrované a reagujúce:

    absolútny;
    vľavo: 50%;
    okraj vľavo: -100 pixelov;

    to by bola polovica.

  14.   Edgar cjuno dijo

    Príspevok si cením, skutočne mi pomohol, pozdravujem!

  15.   Miriam Jess dijo

    Veľmi dobrý príspevok mi veľmi pomohol, tisíc milosti!