Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Wyśrodkowanie menu w arkuszu CSS
Forum PHP.pl > Forum > Przedszkole
kamilo600
Witam, chciałbym się dowiedzieć jak wyśrodkować menu w arkuszu CSS. Próbowałem już różnych metod, ale żadna nie przyniosła pozytywnego rezultatu. Chodzi mi o wyśrodkowanie tekstu w menu.

  1. <div id='cssmenu'>
  2. <ul>
  3. <li class='active'><a href='index.html'><span>Home</span></a></li>
  4. <li class='has-sub'><a href='#'><span>Products</span></a>
  5. <ul>
  6. <li class='has-sub'><a href='#'><span>Product 1</span></a>
  7. <ul>
  8. <li><a href='#'><span>Sub Item</span></a></li>
  9. <li class='last'><a href='#'><span>Sub Item</span></a></li>
  10. </ul>
  11. </li>
  12. <li class='has-sub'><a href='#'><span>Product 2</span></a>
  13. <ul>
  14. <li><a href='#'><span>Sub Item</span></a></li>
  15. <li class='last'><a href='#'><span>Sub Item</span></a></li>
  16. </ul>
  17. </li>
  18. </ul>
  19. </li>
  20. <li><a href='#'><span>About</span></a></li>
  21. <li class='last'><a href='#'><span>Contact</span></a></li>
  22. </ul>
  23. </div>


  1. /* Starter CSS for Menu */
  2. #cssmenu {
  3. padding: 0;
  4. margin: 0;
  5. border: 0; }
  6.  
  7. #cssmenu ul, #cssmenu li {
  8. list-style: none;
  9. margin: 0;
  10. padding: 0; }
  11.  
  12. #cssmenu ul {
  13. position: relative;
  14. z-index: 597; }
  15.  
  16. #cssmenu ul li {
  17. float: left;
  18. min-height: 1px;
  19. vertical-align: middle; }
  20.  
  21. #cssmenu ul li.hover,
  22. #cssmenu ul li:hover {
  23. position: relative;
  24. z-index: 599;
  25. cursor: default; }
  26.  
  27. #cssmenu ul ul {
  28. visibility: hidden;
  29. position: absolute;
  30. top: 100%;
  31. left: 0;
  32. z-index: 598;
  33. width: 100%; }
  34.  
  35. #cssmenu ul ul li {
  36. float: none; }
  37.  
  38. #cssmenu ul ul ul {
  39. top: 0;
  40. left: auto;
  41. right: -99.5%; }
  42.  
  43. #cssmenu ul li:hover > ul {
  44. visibility: visible; }
  45.  
  46. #cssmenu ul ul {
  47. bottom: 0;
  48. left: 0; }
  49.  
  50. #cssmenu ul ul {
  51. margin-top: 0; }
  52.  
  53. #cssmenu ul ul li {
  54. font-weight: normal; }
  55.  
  56. #cssmenu a {
  57. display: block;
  58. line-height: 1em;
  59. text-decoration: none; }
  60.  
  61. /* Custom CSS Styles */
  62. #cssmenu {
  63. background: #333;
  64. border-bottom: 4px solid #1b9bff;
  65. font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  66. font-size: 12px; }
  67. #cssmenu > ul {
  68. *display: inline-block; }
  69. #cssmenu:after, #cssmenu ul:after {
  70. content: '';
  71. display: block;
  72. clear: both; }
  73. #cssmenu ul {
  74. text-transform: uppercase; }
  75. #cssmenu ul ul {
  76. border-top: 4px solid #1b9bff;
  77. text-transform: none;
  78. min-width: 190px; }
  79. #cssmenu ul ul a {
  80. background: #1b9bff;
  81. color: #FFF;
  82. border: 1px solid #0082e7;
  83. border-top: 0 none;
  84. line-height: 150%;
  85. padding: 16px 20px; }
  86. #cssmenu ul ul ul {
  87. border-top: 0 none; }
  88. #cssmenu ul ul li {
  89. position: relative; }
  90. #cssmenu ul ul li:first-child > a {
  91. border-top: 1px solid #0082e7; }
  92. #cssmenu ul ul li:hover > a {
  93. background: #35a6ff; }
  94. #cssmenu ul ul li:last-child > a {
  95. -moz-border-radius: 0 0 3px 3px;
  96. -webkit-border-radius: 0 0 3px 3px;
  97. border-radius: 0 0 3px 3px;
  98. -moz-background-clip: padding;
  99. -webkit-background-clip: padding-box;
  100. background-clip: padding-box;
  101. -moz-box-shadow: 0 1px 0 #1b9bff;
  102. -webkit-box-shadow: 0 1px 0 #1b9bff;
  103. box-shadow: 0 1px 0 #1b9bff; }
  104. #cssmenu ul ul li:last-child:hover > a {
  105. -moz-border-radius: 0 0 0 3px;
  106. -webkit-border-radius: 0 0 0 3px;
  107. border-radius: 0 0 0 3px;
  108. -moz-background-clip: padding;
  109. -webkit-background-clip: padding-box;
  110. background-clip: padding-box; }
  111. #cssmenu ul ul li.has-sub > a:after {
  112. content: '+';
  113. position: absolute;
  114. top: 50%;
  115. right: 15px;
  116. margin-top: -8px; }
  117. #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
  118. background: #1b9bff;
  119. color: #FFF; }
  120. #cssmenu ul li.has-sub > a:after {
  121. content: '+';
  122. margin-left: 5px; }
  123. #cssmenu ul li.last ul {
  124. left: auto;
  125. right: 0; }
  126. #cssmenu ul li.last ul ul {
  127. left: auto;
  128. right: 99.5%; }
  129. #cssmenu a {
  130. background: #333;
  131. color: #CBCBCB;
  132. padding: 0 20px; }
  133. #cssmenu > ul > li > a {
  134. line-height: 48px; }]
artisan
Kod
margin:auto;
padding:auto;


dla elementu/id cssmenu
toffiak
Zamień margin: 0; na margin: 0 auto; dla elementu o id = 'cssmenu'
kamilo600
Nie działa :/
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.