Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Wyśrodkowanie diva
Forum PHP.pl > Forum > Przedszkole
JacekKw
10.03.2010, 13:18:02
Niby podstawa a tyle z tym problemów. Czytałem o tym kilka wątków i natknąłem się jedynie na rozwiązanie margin: 0px auto, które jest w moim przypadku nieskuteczne
lord_t
10.03.2010, 13:19:37
A szerokość ustawiłeś?
Kethrax
10.03.2010, 13:22:54 
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #a {
  3. width: 500px;
  4. height: 100px;
  5. }
  6.  
  7. #b {
  8. width:200px;
  9. height: 50px;
  10. margin: 0 auto;
  11. }
  12. </style>
  13.  
  14. <div id="a">
  15.  
  16. <div id="b"> </div>
  17.  
  18. </div>
[HTML] pobierz, plaintext
artur_dziocha
10.03.2010, 13:26:03
nie da rady tak.
ustaw margin w b na
margin: 0px 150px
Kethrax
10.03.2010, 13:40:12
Szerokość div'a ustawiłem tylko przykładową, u mnie margin: 0 auto; działa bez problemu na wszystkich przeglądarach, dla IE ustawiam dodatkowo w #a text-align: center;
JacekKw
10.03.2010, 13:54:24
Popełniłem błąd w analizie problemu. margin 0 auto działa skutecznie.

Problem mam tak na prawdę z ustawieniem kilku divów w jednej linii tak żeby były na środku diva-kontenera.

W przypadku zastosowaniu na bloczkach float:left będa one nieco przesunięte do lewej. A jak użyje display:inline to jakby ignorowało margin 0 auto; i ustawia mi je wszystkie do lewej



efekt float:left;

----------------------------------------------------------------



efekt display:inline
mortus
10.03.2010, 14:09:31
Niestety musisz mieć ustawioną szerokość każdego div-a i szerokość div-a kontenera równą sumie szerokości div-ów w środku. I wtedy do diva kontenera dodajesz margin: 0 auto; Innej możliwości nie ma.
krzysztof_kf
10.03.2010, 14:22:03
pokaż kawałek css
JacekKw
10.03.2010, 14:38:39 
[XML] pobierz, plaintext 
  1. #menu {
  2. width: 550px;
  3. height:3%;
  4. margin:0px auto;
  5. clear:both;
  6. padding: 15px 0 0 0;
  7. background: #fff;
  8. }
  9.  
  10. #mbutton {
  11. width:90px;
  12. height:3%;
  13. float:left;
  14. margin:0px auto;
  15. padding: 0px 20px;
  16. font-family: Nyala;
  17. font-size:20px;
  18. }
[XML] pobierz, plaintext


#menu to ten biały blok na środku strony a #mbutton to bloczki Firma, Kolekcje, Sklepy, Kontakt

Cytat(mortus @ 10.03.2010, 14:09:31 ) *
Niestety musisz mieć ustawioną szerokość każdego div-a i szerokość div-a kontenera równą sumie szerokości div-ów w środku. I wtedy do diva kontenera dodajesz margin: 0 auto; Innej możliwości nie ma.



Miałem nadzieje, że będę mógł użyć tego samego arkusza stylów dla wersji polsko i anglojęzycznej strony. A tam wiadomo, rózne długości poszczególnych wyrazów smile.gif
Kethrax
10.03.2010, 14:40:37
JacekKw tak jak napisałem wyżej -> ma być margin: 0 auto; .
JacekKw
10.03.2010, 14:42:02
Przecież jest...
Kethrax
10.03.2010, 14:44:19
Cytat(JacekKw @ 10.03.2010, 14:38:39 ) *
[XML] pobierz, plaintext 
  1. #menu {
  2. width: 550px;
  3. height:3%;
  4. margin:0px auto;
  5. clear:both;
  6. padding: 15px 0 0 0;
  7. background: #fff;
  8. }
  9.  
  10. #mbutton {
  11. width:90px;
  12. height:3%;
  13. float:left;
  14. margin:0px auto;
  15. padding: 0px 20px;
  16. font-family: Nyala;
  17. font-size:20px;
  18. }
[XML] pobierz, plaintext


#menu to ten biały blok na środku strony a #mbutton to bloczki Firma, Kolekcje, Sklepy, Kontakt




Miałem nadzieje, że będę mógł użyć tego samego arkusza stylów dla wersji polsko i anglojęzycznej strony. A tam wiadomo, rózne długości poszczególnych wyrazów smile.gif

mortus
10.03.2010, 14:48:38
A co to za różnica, czy będzie margin: 0 auto; czy margin: 0px auto;? Nie ma sensu używać jednocześnie margin: 0 auto; i float: left;, bo to nic nie da. Margines nie jest wtedy uwzględniany. Musisz znać szerokość całego menu (równą sumie szerokości #mbutton), żeby wyśrodkować je na stronie. A tak w ogóle to mbutton powinno być u Ciebie klasą, a nie identyfikatorem.
Cytat
Miałem nadzieje, że będę mógł użyć tego samego arkusza stylów dla wersji polsko i anglojęzycznej strony. A tam wiadomo, rózne długości poszczególnych wyrazów

A co to za problem? Dostosowujesz klasę mbutton do najdłuższego wyrazu zarówno w języku polskim, jak i angielskim, no i centrujesz tekst:
Kod
.mbutton {
    width: xxxxx; // szerokość najdłuższego napisu;
    padding: 0 10px; // coby jakiś odstęp był pomiędzy kolejnymi linkami
    text-align: center; // żeby tekst był na środku
}
krzysztof_kf
10.03.2010, 15:08:15
jeśli chcesz jeden button wyśrodkować
Kod
#menu {
width: 550px;
height:3%;
margin:0px auto;
clear:both;
padding: 1px 0 0 0;
background: #fff;
border: 1px solid #000;
}

#mbutton {
width:90px;
height: 100%;
margin:0px auto;
font-family: Nyala;
font-size:20px;
border: 1px solid #3399ff;
}
JacekKw
11.03.2010, 09:25:40
Dziękuję Panowie. Rozwiązanie mortusa w pełni rozwiązuje problem smile.gif

A może jeszcze w temacie... jak wycentrować diva w divie tak żeby był na środku zarówno horyzontalnie jak i wertykalnie?
mortus
11.03.2010, 11:34:24
div-owi nadrzędnemu trzeba nadać style display: table-cell; i vertical-align: middle;, a div-owi w środku margin: 0 auto;. Sprawdź to:
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <meta name="content-type" content="text/html; charset=UTF-8" />
  4.         <style type="text/css">
  5.         	#box1 {
  6.         		border: 1px solid #ccc;
  7. 				width: 500px;
  8. 				height: 200px;
  9. 				display: table-cell;
  10. 				vertical-align: middle;
  11.         	}
  12. 			#box2 {
  13. 				margin: 0 auto;
  14. 				border: 1px solid #000;
  15. 				width: 100px;
  16. 				height: 50px;
  17. 			}        
  18.         </style>
  19.     </head>
  20.     <body>
  21.     	<div id="box1">
  22.     		BOX 1
  23.     		<div id="box2">
  24.     			BOX 2
  25.     		</div>    		
  26.     	</div>
  27.     </body>
  28. </html>
[HTML] pobierz, plaintext
JacekKw
11.03.2010, 12:31:04
To dla mnie kłopotliwe w implemetacji, gdyż używam często szerokości procentowych

[HTML] pobierz, plaintext 
  1. #tresc {
  2. height: 73%;
  3. width:100%;
  4. text-align: center;
  5. }
  6.  
  7. #kontakt {
  8. width: 800px;
  9. height: 500px;
  10. margin: 0px auto;
  11. }
[HTML] pobierz, plaintext


Muszę sprawić by #kontakt był wycentrowany w #treść a zastosowanie opisanej wyżej metody nie przynosi korzystnych rezultatów
krzysztof_kf
11.03.2010, 13:25:26
Kod
<style type="text/css">
#tresc {
height: 73%;
width:100%;
text-align: center;
}

#kontakt {
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
</style>
<div id="tresc">
<div id="kontakt">
kontakt ze mna
</div>
mortus
11.03.2010, 15:07:34
Niestety, jeżeli używasz wielkości procentowych, to musisz manipulować samym marginem
[CSS] pobierz, plaintext 
  1. #tresc {
  2.     width: 100%;
  3.     height: 73%;
  4.     text-align: center;
  5. }
  6. #kontakt {
  7.     width: 800px;
  8.     height: 500px;
  9.     margin: xxxxx auto;
  10.     /* w miejsce xxxxx wpisujesz odpowiednio obliczony margines (będzie to margines górny i zarazem dolny) */
  11. }
[CSS] pobierz, plaintext
Z tym, że xxxxx musi być podane w procentach i nie u każdego może to działać tak, jak powinno (różne rozdzielczości monitorów, różne viewporty). No chyba, że sam div#tresc znajduje się w jakimś innym div-ie, który ma nadaną wysokość w px, to wtedy wszystko można dokładnie policzyć. Inną alternatywą jest wykorzystanie języka JavaScript i dynamiczne ustawianie stylu elementów podczas ładowania strony.
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.