Trik: vycentrujte absolutní pozici div

V CSS si někdy komplikujeme život jednoduchými věcmi, které jsou méně komplikované, než si myslíme, a že když vidíme řešení, skoro jsme se smáli pozorování takových anekdot.

Více než jedna osoba se mě zeptala, jak vycentrovat absolutně umístěný div, a odpověď je velmi jednoduchá:

  1. Dáme div pevnou šířku. Příklad: 500px
  2. Absolutně umístíme div s 50% zbývajícím. Příklad: pozice: absolutní; vlevo: 50%;
  3. S marží odečteme polovinu toho, co měří. Příklad: margin-left: -250px;

Výsledkem je dokonale vycentrovaný, absolutně umístěný div.


Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   Ivan Lira řekl

    Moc děkuji .. jak říkáte něco tak jednoduchého a že i přes čas je stále autor mnoha bolestí hlavy.
    Váš příspěvek byl pro mě velmi užitečný, moc děkuji.

  2.   klas řekl

    Děkuji mnohokrát !!!

  3.   glbroman řekl

    Dobrý příspěvek, hodně mi sloužil, děkuji

  4.   LUCASG řekl

    Jaký skvělý blázen mi sloužil: D

  5.   vítěz řekl

    Skvělé díky ...

  6.   benjamín řekl

    Velmi dobrý Carlos.

  7.   Zástupný obrázek pro Mario Lozano řekl

    Výborný info

  8.   Frank Koq řekl

    Děkuji, sloužilo mi to

  9.   marc řekl

    Zachránil jsi mě!!! Děkuji :)

  10.   Danielfloyd řekl

    Děkuji ti, strýčku, hodně jsi mi pomohl !!, ten můj nedostatek fantazie.

  11.   Damian řekl

    Děkuji mnohokrát !!!!! tento trik mi vždy pomůže haha

  12.   o řekl

    děkuji moc vynikající přítel

  13.   Chrismart Anji řekl

    To není vycentrováno, vše závisí na původní velikosti elementu div div, že ho necháme růst v závislosti na tom, co je vloženo dovnitř, pro mě bylo užitečnější to použít než vizuálně, pokud to vidím ještě více na střed a reagující:

    absolutní;
    vlevo: 50%;
    levý okraj: -100px;

    to by byla polovina.

  14.   Edgar cjuno řekl

    Příspěvek si vážím, opravdu mi pomohl, pozdravy!

  15.   Miriam Jessová řekl

    Velmi dobrý příspěvek mi hodně pomohl, tisíc milosti!