Sztuczka: wyśrodkuj absolutną pozycję div

W CSS czasami komplikujemy sobie życie prostymi rzeczami, które są mniej skomplikowane niż nam się wydaje, i że kiedy widzimy rozwiązanie, niemal śmiejemy się z oglądania takich anegdot.

Więcej niż jedna osoba pytała mnie, jak wyśrodkować absolutnie pozycjonowany element div, a odpowiedź jest bardzo prosta:

  1. Dajemy elementowi div o stałej szerokości. Przykład: 500px
  2. Bezwzględnie pozycjonujemy div z 50% pozostałymi. Przykład: pozycja: bezwzględna; po lewej: 50%;
  3. Odejmujemy połowę tego, co mierzy z marginesem. Przykład: margin-left: -250px;

Rezultatem jest idealnie wyśrodkowany, absolutnie umieszczony div.


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

15 komentarzy, zostaw swoje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany.

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.

  1.   Ivan Lira powiedział

    Dziękuję bardzo… jak mówisz coś tak prostego i że mimo upływu czasu jest nadal autorem wielu bólów głowy.
    Twój post był dla mnie bardzo przydatny, bardzo dziękuję.

  2.   kaczan powiedział

    Dziękuję Ci bardzo !!!

  3.   Glbroman powiedział

    Dobry wkład bardzo mi pomógł, dzięki

  4.   LUCASG powiedział

    Jakie wielkie szaleństwo mi zaserwował: D

  5.   zwycięzca powiedział

    Wspaniale dzięki…

  6.   beniaminek powiedział

    Bardzo dobry Carlos.

  7.   Symbol zastępczy dla Mario Lozano powiedział

    Doskonała informacji

  8.   Frank Koq powiedział

    Dziękuję, to mi służyło

  9.   marc powiedział

    Uratowałeś mnie!!! Dziękuję Ci :)

  10.   Danielfloyd powiedział

    Dziękuję wujku, bardzo mi pomogłeś !!, ten mój brak wyobraźni.

  11.   damian powiedział

    Dziękuję Ci bardzo !!!!! ta sztuczka zawsze mi pomaga haha

  12.   o powiedział

    dziękuję bardzo, wspaniały przyjacielu

  13.   Chrismart Anji powiedział

    To nie jest wyśrodkowane, wszystko zależy od oryginalnego rozmiaru podstawowego elementu div, że zwiększamy go w zależności od tego, co jest w środku, dla mnie było to bardziej przydatne niż wizualnie, jeśli widzę go jeszcze bardziej wyśrodkowany i odpowiadający:

    absolutny;
    po lewej: 50%;
    margines lewy: -100px;

    to byłaby połowa.

  14.   Edgar cjuno powiedział

    Wkład jest doceniany, bardzo mi pomógł, pozdrawiam!

  15.   Miriam Jess powiedział

    Bardzo dobry wkład bardzo mi pomógł, tysiąc łask!

logiczne (prawda)