Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Wyrównanie do środka wertykalnie
Micchaleq
post
Post #1





Grupa: Zarejestrowani
Postów: 186
Pomógł: 4
Dołączył: 13.10.2009

Ostrzeżenie: (0%)
-----

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
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext

style

[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


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;



Ten post edytował Micchaleq 16.01.2012, 15:16:46


--------------------
Strony internetowe Częstochowa
Szablony allegro
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 21:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn