Skocz do zawartości

Wycentrowanie DIV'ów

bestos

Przez bestos
w HTML i CSS

Rekomendowane odpowiedzi

bestos Newbie

bestos

Opublikowano
Opublikowano

Mam przykładowo taki kod:

<div id="top"></div>

I wyświetlany blok, wyświetla się przy lewej krawedzi.

Ja chcę żeby ten blok był na środku, jak w css to napisać?

A w wolnej chwili forum-budowa.pl ew. praktycznie Uwaga awaria!

A to: portal branży budowlanej

Odnośnik do komentarza
Udostępnij na innych stronach
wlodarski Newbie

wlodarski

Opublikowano
Opublikowano
Mam przykładowo taki kod:
<div id="top"></div>

I wyświetlany blok, wyświetla się przy lewej krawedzi.

Ja chcę żeby ten blok był na środku, jak w css to napisać?

Jeden ze sposobow.

w css:

body {text-align: center;}
top { width: 300px; margin: 0 auto;}

oczywiscie szerokosc top zmieniasz sobie jak chcesz.

baner_mini.jpg

Odnośnik do komentarza
Udostępnij na innych stronach
Clain Newbie

Clain

Opublikowano
Opublikowano

Lub 

 
<div id="wrapper">
<div id="top"></div>
<div id="reszta_divów"> </div>
</div> <!-- koniec wrapper !-->

i css :

#wrapper {
width:300px;
margin: 0 auto;
}

I wtedy wszystkie DIVy masz wycentrowane które są objęte przez wrapper.

Odnośnik do komentarza
Udostępnij na innych stronach
misieq Newbie

misieq

Opublikowano
Opublikowano

możesz też zastosować samego html'a i użyć znacznika <center> wyglądałoby to tak

<center>

<div id="top"> smth </div>

</center>

niestety takie zastosowanie kodu spowoduje w IE wycentrowanie tekstu w danym divie (o dziwo w FF jest normalnie) wiec trzeba dodać linijkę w css:

#top{text-align:left; width:880px; }

Pozdrawiam, Kamil ;)

Fotografia Ślubna Tychy | Projekty stron / Kod HTML

Odnośnik do komentarza
Udostępnij na innych stronach
  • 4 tygodnie później...
Łysy! Newbie

Łysy!

Opublikowano
Opublikowano

to że może zastosować znacznik CENTER nie oznacza, że jest to dobre rozwiązanie.

Kluczem do poprawnej interpretacji kodu przez wszystkie obecnie przeglądarki mające udział w rynku powyżej 1% to odpowiednie DTD. Najpierw utwórz dokument z DTD XHTML 1.0 lub HTML 5, a następnie wystarczy danemu elementowi dopisać width i margin: 0 auto;

Odnośnik do komentarza
Udostępnij na innych stronach
websign Newbie

websign

Opublikowano
Opublikowano

Tak jak napisał alleweb w elemencie nadrzędnym (może to być body ale może być inny div) dajesz text-align: center; a w elemencie który chcesz wyśrodkować dajesz szerokość + margin: 0 auto; (lub inną regułkę jeśli chcesz zmienić margines górny i dolny).

Skuteczne pozycjonowanie stron www | Nowe randki internetowe

Odnośnik do komentarza
Udostępnij na innych stronach
Darek82 Newbie

Darek82

Opublikowano
Opublikowano

Widać, że tylko Łysy! zna się na rzeczy. Sposób, który podał to jedyna metoda na wycentrowanie div, który jest zwykle elementem blokowym. Żadne tam jakieś pseudo metody, albo używanie tagów <center> - to może się sprawdzało w czasach, kiedy nikt nie słyszał o standardach i dobrym kodowaniu stron.

Jesteś bezczelny, nieuprzejmy i nie przepuszczasz kobiet w drzwiach? Zapraszam na ulubione24.pl

Odnośnik do komentarza
Udostępnij na innych stronach
wlodarski Newbie

wlodarski

Opublikowano
Opublikowano
Widać, że tylko Łysy! zna się na rzeczy. Sposób, który podał to jedyna metoda na wycentrowanie div, który jest zwykle elementem blokowym. Żadne tam jakieś pseudo metody, albo używanie tagów <center> - to może się sprawdzało w czasach, kiedy nikt nie słyszał o standardach i dobrym kodowaniu stron.

Ja podalem jeden ze sposobow. Nie napisalem, ze to jedyny i najlepszy sposob. Natomiast dziala bardzo dobrze.

baner_mini.jpg

Odnośnik do komentarza
Udostępnij na innych stronach
websign Newbie

websign

Opublikowano
Opublikowano
Widać, że tylko Łysy! zna się na rzeczy. Sposób, który podał to jedyna metoda na wycentrowanie div, który jest zwykle elementem blokowym. Żadne tam jakieś pseudo metody, albo używanie tagów <center> - to może się sprawdzało w czasach, kiedy nikt nie słyszał o standardach i dobrym kodowaniu stron.

To jeszcze niech rzuci jak bez definiowania własnego DTD, w DTD strict zrobić, żeby margin auto działało w starszych IE. Ja metody bez text-align: center nie znam

Skuteczne pozycjonowanie stron www | Nowe randki internetowe

Odnośnik do komentarza
Udostępnij na innych stronach
Łysy! Newbie

Łysy!

Opublikowano
Opublikowano

Strona bez DTD nie jest poprawnym dokumentem HTML.

Jeżeli ktoś chce to może się zmagać z dziesiątkami problemów pod względem interpretacji kodu nie tylko pod IE - wtedy jasne DTD tylko by przeszkadzało w podnoszeniu swoich kwalifikacji dotyczących wyłapywania wszystkich tych nieprawidłowości.

Zalecam jednak dopisanie deklaracji dokumentu, zgodnej z XHTML 1.0 (strict, transitional, frameset - bez znaczenia), lub co prościej, zacząć powoli poznawać HTML 5 i użyć właśnie takiego <!doctype html>

Wtedy znikają wszelkie problemy dotyczące "modelu pudełka" w IE6. Prawda, że proste?

@websign na swojej stronie masz prolog <?xml version="1.0" encoding="utf-8" ?> który w gruncie rzeczy jest zbędny bo ta strona i tak nie jest poprawnym dokumentem XHTML (nie mam tutaj na myśli struktury kodu - nie analizowałem), usuń go a dowiesz się dlaczego musiałeś używać text-align: center;

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności