[HTML+CSS]Wyśrodkowana pionowo i poziomo zawartość DIVa


(Spectatorx) #1

Jak wyśrodkować pionowo i poziomo zawartość diva? Chcę za pomocą bloku uzyskać taki efekt jak kiedyś robiłem za pomocą komórki tabeli i wycentrowania jej za pomocą text-align: center i vertical-align: middle.


(system) #2

http://perfectionorvanity.com/2006/04/1 ... niu-w-css/


(Spectatorx) #3

Ok, stronkę znam, przykłady ciekawe, ale... jakaś alternatywa dla sytuacji gdy nie chcę ustalać konkretnych wymiarów tylko chcę aby zawartość centrowała się do rozmiarów okna z którego korzysta, czyli żeby zawartość zawsze była wycentrowana do środka bez względu na rozdzielczość w jakiej użytkownik przegląda stronę?


(tomilipin) #4

Jeżeli może być bez skalowania okna to CSS wystarczy, tzn. jeśli chcesz pozycjonować DIVa jeden raz, tylko po wczytaniu strony. Potem, jak user zmieni rozmiar okna przeglądarki, DIV taki pozostanie w tym samym miejscu, a co za tym idzie, nie pozostanie na środku. Ale to rzadko się zdarza :wink: Jeśli jednak chcesz ubezpieczyć się na taką ewentualność, musisz pobierać wysokość i szerokość dokumentu na bieżąco przez JavaScript.

Gotowiec CSS mojego autorstwa:

.centercenter {

	position:absolute;

	top: 50%;

	left: 50%;

}

asdasd
[/code]

Pisane z głowy więc może nie działać zbyt dobrze... W środku tego DIVa możesz wstawić sobie kolejnego i ustawić mu padding-top tak, żeby napis czy co tam chcesz wyświetlać, było idealnie na środku.

Odnośnie inline style - on tam musi być. Jeśli przeniesiesz go do CSSa, DIVek nie będzie poprawnie się wyświetlał - nie wiem dlaczego :confused:


(Spectatorx) #5

Rozwiązałem problem.

[/code]

Ustawia zawartość diva na jego śodku. Text-align dodałem dla wyśrokowywania tekstu i obrazków. Według mnie jednak wbrew powszechnie panującej opinii div jest łatwiejszy i lepszy od tabelek do pozycjonowania strony i jej zawartości.

P.S.

Dla przypomnienia objaśnię margin. Podawane wartości to kolejno: top, right, bottom, left, czyli w podanym przykładzie jest margines 15% u góry, automatyczny po prawej, automatyczny na dole, automatyczny po lewej.