Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyśrodkowanie ul
Forum PHP.pl > Forum > Przedszkole
potreb
Witam. W jaki sposób wyśrodkować ul.
  1. ul.pager {
  2. margin: 0 auto;
  3. padding:0;
  4. list-style: none;
  5. border: 1px solid #f4f4f4;
  6. overflow: auto;
  7. }
  8.  
  9. ul.pager li {
  10. float: left;
  11. margin: 1px 1px;
  12. }
  13.  
  14. ul.pager li a, ul.pager li a:link, ul.pager li a:hover {
  15. text-decoration: none;
  16. padding: 6px 8px 6px 8px;
  17. display: block;
  18. background-color: #f1f1f1;
  19. border: 1px solid #ddd;
  20. }
  21.  
  22. ul.pager li span {
  23. text-decoration: none;
  24. padding: 4px 8px 3px 8px;
  25. display: block;
  26. background-color: #f1f1f1;
  27. border: 1px solid #ddd;
  28. }
  29.  
  30. ul.pager .current {
  31. font-weight: bold;
  32. }


Margin auto dla ul nie działa, chyba że ustawię w css szerokość ul. Jednak tak nie może być.
vokiel
Nie możesz wycentrować elementu, jeśli zajmuje całą szerokość. No bo jak. Jeśli masz ustawioną szerokość, to wtedy przeglądarka wie na ile odsunąć go od krawędzi.
Możesz go wrzucić do innego kontenera, i ten kontener wycentrować, ale jak wyżej, jakaś szerokość musi być ustawiona. Z tym, że dla kontenera, możesz ustawić text-align: center, i szerokość ustawić z zapasem.
seth-kk
a dlaczego <a> i <span> nie moga byc inline i srodkowac sie za pomoca text-align?
nitek
Cytat(potreb @ 7.10.2009, 09:37:08 ) *
Margin auto dla ul nie działa, chyba że ustawię w css szerokość ul. Jednak tak nie może być.


w ramach potwierdzenia tego, co zostało napisane wcześniej:
"The W3C says, ?If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.?

Horizontal alignment can be achieved, then, by setting the left and right margins to auto. This is an ideal method of horizontally aligning non-text-based elements; for example, layouts and images. But when center-aligning a layout or element without a specified width, you must specify a width in order for this to work."

źródło: http://www.smashingmagazine.com/2009/10/05...etting-started/

może jeszcze to Ci pomoże: http://24ways.org/2005/centered-tabs-with-css
efekt końcowy jest taki: http://24ways.org/examples/centered-tabs-with-css/final.html
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.