Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Wyśrodkowanie DIV z display: inline-block;
Forum PHP.pl > Forum > Przedszkole
Mike122
Aktualnie tworzę mała statyczną witryne w XHTML + CSS (2.1), natrafiłem na dość cięzki problem z mojego punktu widzenia.
Mianowice chicałem wyśrodkować element div#sideTop - nie mogę usunać display: inline-block; ponieważ dzięki niemu div#sideTop dopasowuje mi się w pełni do swojej zawartości.
  1. //HTML
  2. <div id="sideTop">
  3. <a href="test">Test 1</a>
  4. <a href="test" class="active">Test 2</a>
  5. <a href="test">Test 31</a>
  6. <a href="test">Test 41</a>
  7. <a href="test">Test 51</a>
  8. </div>
  9. /CSS
  10. div#sideTop {
  11. height: 36px;
  12. display: inline-block;
  13. background: #F4F4EC;
  14. font: bold 12px "Lucida Sans Unicode", "Times New Roman", sans-serif;
  15. border: 1px solid #779933;
  16. }
  17.  
  18. div#sideTop a {
  19. border-right: 1px solid #779933;
  20. float: left;
  21. line-height: 36px;
  22. padding: 0 20px;
  23. text-decoration: none;
  24. color: #565C5E;
  25. }
  26.  
  27. div#sideTop a.active {
  28. background: #FFFFFF url('img/menu.jpg') repeat-x;
  29. color: #F4F4EC;
  30. }
  31.  
  32.  
  33. div#sideTop a:hover {
  34. background: #F4F4EC url('img/bgfadegreen.gif') repeat-x;
  35. color: #75902D;
  36. }
  37.  

Bardzo prosze o pomoc.
Niktoś
Użyj marginesów w div#sideTop :
margin-left:100px lub margin-left:10%;
Jak kto woli.
Mike122
Cytat(Niktoś @ 12.01.2012, 02:12:52 ) *
Użyj marginesów w div#sideTop :
margin-left:100px lub margin-left:10%;
Jak kto woli.

Napewno div#sideTop się ruszy jednak nie ustawi go na środku witryny.
Niktoś
Eh myślałem,że tylko w poziomie:
To musiałbyś użyć kombinacji:
margin-left i margin-top.
Leihto
hmm..
Kod
margin : 0 auto;

questionmark.gif
Damonsson
Wrzuć to wszystko w jakiś kontener, któremu nadasz text-align: center;
A zapewne w fazie końcowej będzie to domyślnie w jakimś kontenerze, więc nadaj text-align: center; po prostu rodzicowi sideTop.
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.