Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Wyśrodkowanie pionowe sąsiadujących elementów blokowych.
Forum PHP.pl > Forum > Przedszkole
mateusz.jarzewski
Dobry wieczór.
Próbuje wyśrodkować w pionie zawartość elementu blokowego przy jednoczesnym umiejscowieniu sąsiadującego elementu przy prawej krawędzi. Wyśrodkowanie się udaje, niestety element sąsiadujący nie chce pływać sad.gif

Powinno to wyglądać tak:


Niestety wygląda tak:


Kod HTML/CSS:
  1. ul {
  2. border: 3px solid red;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. ul li {
  8. display: table-cell;
  9. vertical-align: middle;
  10. }
  11. ul li:first-child {
  12. border: 3px solid blue;
  13. }
  14. ul li:last-child {
  15. border: 3px solid green;
  16. }
  17. <ul>
  18. <li>
  19. <span>
  20. Lorem ipsum dolor sit amet
  21. </span>
  22. </li>
  23. <li>
  24. <span>
  25. Lorem ipsum dolor sit amet,<br />
  26. consectetur adipisicing elit.<br />
  27. Minus, ab, similique,<br />
  28. iusto vitae quaerat aspernatur
  29. </span>
  30. </li>
  31. </ul>


Czy ktoś wie jak uzyskać zamierzony efekt?
Z góry dziękuję za pomoc!
modern-web
  1. ul {
  2. width: 600px;
  3. border: 3px solid red;
  4. list-style: none;
  5. margin: 0;
  6. padding: 0;
  7. display: table;
  8. }
  9. ul li {
  10. display: table-cell;
  11. vertical-align: middle;
  12. }
  13. ul li:first-child {
  14. border: 3px solid blue;
  15. }
  16. ul li:last-child {
  17. border: 3px solid green;
  18. float: right;
  19. }
  20. <ul>
  21. <li>
  22. <span>
  23. Lorem ipsum dolor sit amet
  24. </span>
  25. </li>
  26. <li>
  27. <span>
  28. Lorem ipsum dolor sit amet,<br />
  29. consectetur adipisicing elit.<br />
  30. Minus, ab, similique,<br />
  31. iusto vitae quaerat aspernatur
  32. </span>
  33. </li>
  34. </ul>


Przyjrzyj się, szerokość ul możesz sobie dopasować albo dać 100%
mateusz.jarzewski
Doskonale!
UL dostaje styl display:table i width:100% i działa.
Ostatnie pytanie, to czy takie podejście do prodblemu jest odpowiednie, zgodne ze najlepszymi praktykami.
modern-web
Jak najbardziej, łapie się zarówno w RWD jak i najnowszych standardach CSS.
Pamiętaj, że jeżeli dajesz table-cell to wypada, żeby obiekt - rodzic posiadał wartość "table" w tym miejscu smile.gif oba znajdziesz w specyfikacji CSS3.
com
nie tyle że wypada nawet powinien tak to mieć wink.gif
mateusz.jarzewski
Cytat(com @ 16.01.2014, 18:19:01 ) *
nie tyle że wypada nawet powinien tak to mieć wink.gif

Stylistyka kretyna.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.