Wyśrodkowanie diva nie działa gdy szerokość containera jest w %.

pytanie zadane 12 czerwca 2015 w HTML i CSS przez artimal Gaduła (4,800 p.)
zmienione kategorie 12 czerwca 2015 przez Arkadiusz Waluk

Tak jak w temacie.

Oto zawartość mojej strony:

#container
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

W tym divie siedzą dwa kolejne lecz niestety wyśrodkowanie ich działa tylko kiedy szerokość containera ustawiona jest w px. Dodałem też <div style="clear:both;"></div> o którym wspominał Mirosław w swoim filmiku lecz niestety to też nie pomogło. Proszę o pomoc.

3 odpowiedzi

odpowiedź 12 czerwca 2015 przez Comandeer Guru (600,810 p.)
wybrane 12 czerwca 2015 przez artimal

Najlepsza

A czy tamte divy mają określoną szerokość w px? Jeśli tak, to raczej one powinny być centrowane, nie #container.

Na logikę: centrowanie polega na nadaniu takich samych marginesów elementowi z lewej i prawej strony. Jeśli element ma 100% szerokości to na marginesy zostaje 0 miejsca… stąd też nic się nie rusza ;)

PS zła kategoria pytania

komentarz 12 czerwca 2015 przez HaKIM Szeryf (87,590 p.)

Dlaczego zła?

W końcu porusza Css.

komentarz 12 czerwca 2015 przez Comandeer Guru (600,810 p.)

Zauważ, ze kategoria została zmieniona przez redaktora ;) Na początku było C/C++

komentarz 12 czerwca 2015 przez testerius Pasjonat (23,960 p.)

Przedtem było chyba w C++ ^_^

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

HTML i CSS to zła kategoria?

Tamte divy są w procentach :D

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

Oj to przepraszam :)

komentarz 12 czerwca 2015 przez Comandeer Guru (600,810 p.)

Jak wszystko masz w procentach i ma nadane 100% to jak ma się wyśrodkować? Przecież nie ma już miejsca na to ;)

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

Przy 90% też nie działa, zobacz na kod który wstawiłem w innej wiadomości :)

komentarz 12 czerwca 2015 przez Comandeer Guru (600,810 p.)

Problemem jest float - albo ma być na lewo, albo na środku.

Pozwoliłem sobie z float zmienić na display: inline-block - w tym wypadku nie zrobi to różnicy. Dodatkowo dla #container dodałem text-align: center (bo elementy liniowo-blokowe zachowują się jak tekst) i są ładnie na środku

Link: http://jsfiddle.net/Comandeer/ocjp533d/

A tu trochę o liniowo-blokowych: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

Jesteś moim mistrzem :) Na prawdę doceniam to, że tak skutecznie pomagasz początkującym koderom. Jeśli uda mi się zarobić trochę groszy z tej strony to z pewnością przeleję Ci jakąś darowiznę.

Pozdrawiam.

odpowiedź 12 czerwca 2015 przez HaKIM Szeryf (87,590 p.)

Dasz kodzik Html'a oraz kod klasy tamtych elementów?

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

#zadanie
{
	width: 30%;
	height: 1500px;
	background-color: white;
	border-radius: 15px;

	
	padding: 30px;
	margin: 30px;
	float: left;
}

#wyjasnienie
{
	width: 30%;
	height: 1500px;
	background-color: white;
	border-radius: 15px;

	
	padding: 30px;
	margin: 30px;
	float: left;
}

#container
{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

<body>


<div id="container">
<div id="zadanie">
aha
</div>
<div id="wyjasnienie">
aha2
</div>
<div style="clear:both;"></div>
</div>


</body>

komentarz 12 czerwca 2015 przez HaKIM Szeryf (87,590 p.)

A weź wywal ten margin i padding.

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

Teraz dwa divy które śa w containerze się zlały, bo nie ma między nimi odstępu, a tak to nic się nie zmieniło.

odpowiedź 12 czerwca 2015 przez testerius Pasjonat (23,960 p.)

Zmniejsz szerokość do np. 90% i zobacz jaki będzie efekt, tak jak napisał Comandeer musisz zostawić coś na marginesy.

komentarz 12 czerwca 2015 przez artimal Gaduła (4,800 p.)

Efekt jest taki, że oba divy wewnątrz kierują się troche do prawej zapewne o tą różnicę dziesięciu procent :)

Podobne pytania

0 głosów

2 odpowiedzi 1,580 wizyt

Wyśrodkowanie DIVa

pytanie zadane 28 czerwca 2015 w HTML i CSS przez tede774 Bywalec (2,650 p.)

0 głosów

0 odpowiedzi 101 wizyt

Szerokość diva taka sama przy wydruku jak i na ekranie po zastosowaniu transformacji tekstu

pytanie zadane 2 sierpnia 2017 w HTML i CSS przez maciej.tokarz Nałogowiec (27,280 p.)

0 głosów

3 odpowiedzi 470 wizyt

Wyśrodkowanie komunikatu tekstowego w divie (pion i poziom)

pytanie zadane 10 września 2015 w HTML i CSS przez babiak Obywatel (1,810 p.)

Wyśrodkowanie diva nie działa gdy szerokość containera jest w %.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci