+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: centrowanie div (/thread-centrowanie-div)
centrowanie div - daniio - 07-02-2012
Witam
Mój problem jest następujący
mam element div i w nim kolejny div. Szerokość tego w środku jest dopasowana do jego zawartości. Chciałbym teraz tego div-a w środku wycentrować. Daję mu margin-left: auto i dla roght to samo i nie działa. Czemu?
Trochę kodu
html:
Kod:
<div id="pasek_gora">
<div id="przyciski_menu_gora">
<img src="Grafika/p.png" alt="p">
<img src="Grafika/p.png" alt="p">
<img src="Grafika/p.png" alt="p">
</div>
</div>css:
Kod:
#pasek_gora
{
background: url('Grafika/tlo.jpg');
width: 800px;
height: 50px;
}
#przyciski_menu_gora
{
position: absolute;
margin-left: auto;
margin-right: auto;
}RE: centrowanie div - Kartofelek - 07-02-2012
bo nie ma czegoś takiego jak rought
daj mu wyświetlanie display:inline-block i wtedy margin:0 auto;
Normalnie DIV ma 100% szerokości bo jest elementem blokowym (jeżeli mu jej nie ustawisz na sztywno). Display inline-block ma szerokość taką jaką ma jego content
Oczywiście najlepiej dać coś takiego:
Kod:
display:inline-block;
*display:inline; /* ie7 ect */
margin: 0 auto;Tak naprawdę to taki element możesz równie dobrze centrować przez text-align:center elementu rodzica.
RE: centrowanie div - daniio - 07-02-2012
Dzięki za podpowiedź :] A o co chodzi z tym rough? I jeszcze bym prosił o wyjaśnienie. Przeczytałem, że aby div miał szerokość dopasowaną do content należy albo dać mu position: absolute(co też zrobiłem) albo ustawić mu float. I rzeczywiście szerokość mojego wewnętrznego diva jest dopasowana do content. W takim razie dlaczego nie chce się centrować?
RE: centrowanie div - _perlik - 08-02-2012
http://riddle.jogger.pl/2006/04/19/wszystko-co-chcesz-wiedziec-o-centrowaniu-w-css/
RE: centrowanie div - daniio - 09-02-2012
Szczerze powiedziawszy wiedza podana na tej stronie jest mi znana. Być może nie potrafię jej wykorzystać ale nadal nie rozumiem czemu to nie działa. Wytłumaczy mi to ktoś?
RE: centrowanie div - _perlik - 10-02-2012
Aby wycentrować diva w divie musisz obu nadać na stałe ustaloną szerokość w np. px. Czyli w twoim przypadku "#pasek_gora" ma width: 800px; - spoko. Do "#przyciski_menu_gora" musisz też dopisać jakąś szerokość.
A więc CSS będzie wyglądał np. tak:
Kod:
#pasek_gora{
background: gray;
width: 800px;
height: 50px;
}
#przyciski_menu_gora {
background: red;
width: 100px;
margin: 0 auto;
}Jak byk jest to napisane w tutorialu do którego link Ci podesłałem:
Cytat:Każdy element blokowy bez ustawionej szerokości zajmuje 100% wolnego miejsca na stronie. Dlatego wycentrowanie go jest tylko możliwe, jeśli ograniczymy jego zapędy terytorialne - musimy ustawić mu szerokość.
Idąc dalej...
Elementy liniowe jakimi są obrazki (<img />) możesz centrować tak jak tekst, czyli nadając elementowi który je zawiera w CSS text-align: center;
Co jest również opisane w tutorialu:
Cytat:Pierwszy sposób opiera się na domyślnym wyświetlaniu liniowym każdego <img/> - wystarczy dodać klasę akapitowi, który jest pojemnikiem dla obrazka i ustawić text-align na center.
Czyli Twój CSS będzie w tym przypadku taki:
Kod:
#pasek_gora{
background: gray;
width: 800px;
height: 50px;
}
#przyciski_menu_gora {
text-align: center;
}Kolejnym sposobem jest zamienienie liniowych elementów jakim są obrazki na elementy blokowe. Potem należy je wycentrować tak jak div-y (to też el. blokowe) czyli przez margin:0 auto;
Kod:
#pasek_gora{
background: gray;
width: 800px;
height: 50px;
}
#przyciski_menu_gora img {
display: block;
margin: 0 auto;
}Jest to kiepski pomysł jak masz więcej niż 1 obrazek. Czemu? Dlatego, że po każdym elemencie blokowym następuje "załamanie linii" i kolejny element blokowy jest ustawiany pod poprzednim tj. jeden pod drugim.
Polecam czytać powoli i ze zrozumieniem. Ponoć przydaje się to teraz na maturze z polskiego
RE: centrowanie div - daniio - 10-02-2012
Dzięki za wyczerpującą odpowiedź. Oczywiście problem jest już rozwiązany, aczkolwiek co do czytania ze zrozumieniem to nie byłbym taki pewny co do tej uwagi. Osobom doświadczonym jest trochę ciężko zrozumieć, że dla osoby uczącej się załóżmy od podstaw, wyrażenie:
Cytat:musimy ustawić mu szerokośćw tym kontekście wcale nie jest takie jasne.
Cytat:Dlatego wycentrowanie go jest tylko możliwe, jeśli ograniczymy jego zapędy terytorialneTak jak napisałem ustawienie position: absolute ogranicza zapędy terytorialne diva do jego zawartości(czyli tutaj można założyć, że ustala mu pewną szerokość), a mimo tego centrowanie nie działa. Ja wiem, że większość osób tworzące strony kieruje się mottem
Cytat:Tak powinno być bo tak działaJa do nich nie należę i chciałbym to zrozumieć dlaczego tak jest. Ewentualnie prosiłbym odnośnik do jakiegoś źródła, które w sposób jednoznaczny jest rozwiązaniem mojego problemu.
Ps. Oczywiście mówię o pierwszym sposobie opisanym w linku.
Pozdrawiam
RE: centrowanie div - Kartofelek - 10-02-2012
Nie. Pozycjonowanie absolutne nie ustala jego zapędów terytorialnych. Do tego służą overflow:hidden i wymiary (width, height).
Podstawy:
Strona zbudowana jest z części - zwanych często "blokami" (nie mówię tutaj o div, ale o prostokątnych "częściach" siatki z której każda strona jest zrobiona - np nagłówek, jakaś belka boczna, stopka ect, linki w stopce, logo, guziczek ect).
Najczęściej używane są 3 typy takich części: blokowe, inline i inline-block.
Blokowe - zajmują DOMYŚLNIE całą szerkość. Można im nadać wymiary. I właściwie tyle
Inline - zamują DOMYŚLNIE tyle ile zajmuje ich wnętrze. Domyślnie też leżą obok siebie (jak nazwa wskazuje) w poziomej linii. Najlepszym przykładem może być np słowo czy podobna mała rzecz.
Takim elementom domyślnie nie można nadać wymiarów
Inline-block - są połączeniem obydwu powyższych. Czyli leżą domyślnie obok siebie, ale można im spokojnie nadawać wymiary, paddingi itp
To oczywiście ich domyślne zachowanie, bo stylując możesz to totalnie pozmieniać. Ale chodzi o semantykę czyli np głupim pomysłem jest umieszczanie w spanie np h1 itp.
Teraz dochodzi stylowanie.
Jeżeli dasz elementowi blokowemu float, to zacznie on "unosić się" - czyli albo poleci na lewo albo na prawo. Ma to wpływ na położenie innych elementów. Oczywiście na inne typy działa to tak samo. Jeżeli jeden element lata, wtedy żeby inneustawiły się obok niego muszą mieć także latanie do tej strony. Jeżeli któryś element ma już nie latać, wtedy dajemy clear:strona (left, right, both);
Jeżeli dla bloku dasz position:absolute wyrwiesz go totalnie z siatki strony i już nic a nic nie będzie on wpływał na inne elementy. Absolute działa do pierwszego nadrzędnego elementu który ma pozycjonowanie relatywne. Jeżeli takiego nie ma to działa dla strony.
Kod:
<div position:relative> <-- do tego bedzie działać absolute
<div>
<div position:absolute></div>
</div>
</div>Reszta jest opisana w przytaczanych tutaj setki razy tutorialach. Poszukaj w google: html tutorial helion czy html browsehappy. Wiem że te kursy nie są idealne, ale w sumie ciężko znaleźć coś innego. Reszta to już nauka, praktyka i praktyka. Z czasem łapie się doświadczenie i zaczyna bawić się tym całym kodem jakby był zabawkami