[CSS]Wyśrodkowanie diva, Jak ustawić diva po środku innego diva? Opcje

[JacekKw]

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]

A szerokość ustawiłeś?

[Kethrax]

[HTML] pobierz, plaintext 
<style type="text/css">
#a {
width: 500px;
height: 100px;
}
 
#b {
width:200px;
height: 50px;
margin: 0 auto;
}
</style>
 
<div id="a">
 
<div id="b"> </div>
 
</div>
[HTML] pobierz, plaintext 

Ten post edytował Kethrax 10.03.2010, 13:23:29

[artur_dziocha]

nie da rady tak.
ustaw margin w b na
margin: 0px 150px

[Kethrax]

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]

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]

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]

pokaż kawałek css

[JacekKw]

[XML] pobierz, plaintext 
#menu {
width: 550px;
height:3%;
margin:0px auto;
clear:both;
padding: 15px 0 0 0;
background: #fff;
}
 
#mbutton {
width:90px;
height:3%;
float:left;
margin:0px auto;
padding: 0px 20px;
font-family: Nyala;
font-size:20px;
}
[XML] pobierz, plaintext 

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

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

Ten post edytował JacekKw 10.03.2010, 14:43:17

[Kethrax]

JacekKw tak jak napisałem wyżej -> ma być margin: 0 auto; .

[JacekKw]

Przecież jest...

[Kethrax]

[XML] pobierz, plaintext 
#menu {
width: 550px;
height:3%;
margin:0px auto;
clear:both;
padding: 15px 0 0 0;
background: #fff;
}
 
#mbutton {
width:90px;
height:3%;
float:left;
margin:0px auto;
padding: 0px 20px;
font-family: Nyala;
font-size:20px;
}
[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

[mortus]

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.

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
}

Ten post edytował mortus 10.03.2010, 14:54:33

[krzysztof_kf]

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]

Dziękuję Panowie. Rozwiązanie mortusa w pełni rozwiązuje problem

A może jeszcze w temacie... jak wycentrować diva w divie tak żeby był na środku zarówno horyzontalnie jak i wertykalnie?

[mortus]

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 
<html>
    <head>
        <meta name="content-type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        	#box1 {
        		border: 1px solid #ccc;
				width: 500px;
				height: 200px;
				display: table-cell;
				vertical-align: middle;
        	}
			#box2 {
				margin: 0 auto;
				border: 1px solid #000;
				width: 100px;
				height: 50px;
			}        
        </style>
    </head>
    <body>
    	<div id="box1">
    		BOX 1
    		<div id="box2">
    			BOX 2
    		</div>    		
    	</div>
    </body>
</html>
[HTML] pobierz, plaintext 

[JacekKw]

To dla mnie kłopotliwe w implemetacji, gdyż używam często szerokości procentowych

[HTML] pobierz, plaintext 
#tresc {
height: 73%;
width:100%;
text-align: center;
}
 
#kontakt {
width: 800px;
height: 500px;
margin: 0px auto;
}
[HTML] pobierz, plaintext 

Muszę sprawić by #kontakt był wycentrowany w #treść a zastosowanie opisanej wyżej metody nie przynosi korzystnych rezultatów

[krzysztof_kf]

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>

Ten post edytował krzysztof_kf 11.03.2010, 13:27:02

[mortus]

Niestety, jeżeli używasz wielkości procentowych, to musisz manipulować samym marginem

[CSS] pobierz, plaintext 
#tresc {
    width: 100%;
    height: 73%;
    text-align: center;
}
#kontakt {
    width: 800px;
    height: 500px;
    margin: xxxxx auto;
    /* w miejsce xxxxx wpisujesz odpowiednio obliczony margines (będzie to margines górny i zarazem dolny) */
}
[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.

Ten post edytował mortus 11.03.2010, 15:11:31