Witam, za pewne dla wielu z was to pestka, ale dla mnie to masakryczna zmora.

Próbowałem już troche sposobów ( padding, margin, vertical-align) ale nic mi nie pomaga.

Jak ustawić wyrównanie na środku ( wertykalnie ) napisu który znajduje się pomiędzy <div position> ?

moje 2 pliki :
index.html
  1. <body bgcolor="#999999">
  2. <br><br><br><br><br>
  3. <div id="menu">
  4.  
  5. <div class="active float_left"><div class="position">Home</div></div>
  6. <div class="ex2 float_left"><div class="position">Home</div></div>
  7. <div class="ex2 float_left"><div class="position">Home</div></div>
  8. <div class="ex2 float_left"><div class="position">Home</div></div>
  9. <div class="ex2 right_round float_left"><div class="position">Home</div></div>
  10.  
  11. </div>
  12.  
  13.  
  14.  
  15. </body>

style

  1.  
  2. #menu{
  3. width: 990px;
  4. height: 82px;
  5. margin-left: 100px;
  6. }
  7.  
  8. .active{
  9. height: 80px;
  10. width: 197px;
  11. margin-top: 1px;
  12. background-image: linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  13. background-image: -o-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  14. background-image: -moz-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  15. background-image: -webkit-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  16. background-image: -ms-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  17. background-image: -webkit-gradient(
  18. linear,
  19. left bottom,
  20. left top,
  21. color-stop(0, rgb(142,0,0)),
  22. color-stop(1, rgb(255,0,47))
  23. );
  24. -webkit-border-radius: 10px;
  25. -moz-border-radius: 10px;
  26. border-radius: 10px;
  27. }
  28. .ex2{
  29. height: 40px;
  30. width: 197px;
  31. margin-top: 21px;
  32. -webkit-transition: all 0.3s ease-in-out;
  33. -moz-transition: all 0.3s ease-in-out;
  34. -o-transition: all 0.3s ease-in-out;
  35. background-image: linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  36. background-image: -o-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  37. background-image: -moz-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  38. background-image: -webkit-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  39. background-image: -ms-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  40.  
  41. background-image: -webkit-gradient(
  42. linear,
  43. left bottom,
  44. left top,
  45. color-stop(0, rgb(254,254,254)),
  46. color-stop(0.48, rgb(235,235,235)),
  47. color-stop(0.52, rgb(243,243,243)),
  48. color-stop(1, rgb(254,254,254))
  49. );
  50. }
  51.  
  52. .ex2:hover {
  53. height: 80px;
  54. width: 197px;
  55. margin-top: 1px;
  56. background-image: linear-gradient(bottom, rgb(68,68,68) 0%, rgb(136,136,136) 100%);
  57. background-image: -o-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(136,136,136) 100%);
  58. background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(136,136,136) 100%);
  59. background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(136,136,136) 100%);
  60. background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(136,136,136) 100%);
  61.  
  62. background-image: -webkit-gradient(
  63. linear,
  64. left bottom,
  65. left top,
  66. color-stop(0, rgb(68,68,68)),
  67. color-stop(1, rgb(136,136,136))
  68. );
  69. -webkit-border-radius: 10px;
  70. -moz-border-radius: 10px;
  71. border-radius: 10px;
  72. }
  73.  
  74. .float_left{
  75. float: left;
  76. }
  77. .cls{
  78. clear: both;
  79. }
  80.  
  81. /* GRADIENT CZERWONY */
  82.  
  83. .red_grad{
  84. background-image: linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  85. background-image: -o-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  86. background-image: -moz-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  87. background-image: -webkit-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  88. background-image: -ms-linear-gradient(bottom, rgb(142,0,0) 0%, rgb(255,0,47) 100%);
  89. background-image: -webkit-gradient(
  90. linear,
  91. left bottom,
  92. left top,
  93. color-stop(0, rgb(142,0,0)),
  94. color-stop(1, rgb(255,0,47))
  95. );
  96. }
  97. /* SŁABY SZARY CZERWONY */
  98.  
  99. .light_grey_grad{
  100. background-image: linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  101. background-image: -o-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  102. background-image: -moz-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  103. background-image: -webkit-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  104. background-image: -ms-linear-gradient(bottom, rgb(254,254,254) 0%, rgb(235,235,235) 48%, rgb(243,243,243) 52%, rgb(254,254,254) 100%);
  105.  
  106. background-image: -webkit-gradient(
  107. linear,
  108. left bottom,
  109. left top,
  110. color-stop(0, rgb(254,254,254)),
  111. color-stop(0.48, rgb(235,235,235)),
  112. color-stop(0.52, rgb(243,243,243)),
  113. color-stop(1, rgb(254,254,254))
  114. );
  115. }
  116. /* SZARY CZERWONY */
  117.  
  118. .grey_grad{
  119.  
  120. }
  121. /* ZAOKRĄGLANIE GÓRNE */
  122. .top_box{
  123. border-top-left-radius: 10px 10px;
  124. border-top-right-radius: 10px 10px;
  125. }
  126.  
  127. /* ZAOKRĄGLANIE DOLNE */
  128. .bot_box{
  129. border-bottom-left-radius: 10px 10px;
  130. border-bottom-right-radius: 10px 10px;
  131. }
  132. /* ZAOKRĄGLANIE LEWE */
  133. .left_round{
  134. border-top-left-radius: 10px 10px;
  135. border-bottom-left-radius: 10px 10px;
  136. }
  137. /* ZAOKRĄGLANIE PRAWE */
  138. .right_round{
  139. border-top-right-radius: 10px 10px;
  140. border-bottom-right-radius: 10px 10px;
  141. }
  142. .round{
  143. -webkit-border-radius: 10px;
  144. -moz-border-radius: 10px;
  145. border-radius: 10px;
  146. }
  147.  
  148. .position{
  149. position: relative;
  150. height: 100%;
  151. text-align: center;
  152. border: 1px solid white;
  153. }


Przepraszam za zaśmiecanie, ale właśnie to znalazłem.

display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;