Forum PHP.pl > Wycentrowanie diva (góra

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wycentrowanie diva (góra - dół)

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Sexee

1.04.2012, 18:55:37

Mam na myśli wyśrodkowanie w pionie, która funkcja za to odpowiada? Dawno się w tym nie bawiłem i zapomniałem.

EDIT: Szukam i szukam ale chyba nic takiego nie ma, trzeba się bawić procentami, pikselami i tak dalej. A szkoda, bo to podstawa. W CSS 4 powinni to zrobić, bo w kółko ciągłe kombinacje - choćby jedną funkcję, która tylko centruje i jednocześnie zostawić obecny sposób, bo nie zawsze robi się takie rzeczy by coś wyśrodkować. Jak ktoś zna w miarę prosty sposób, ale na DIVA to niech napisze. Mi się tylko na czcionkę udaje znaleźć takie w miarę fachowe centrowanie.

by_ikar

2.04.2012, 07:13:51

A po co tutaj jakieś funkcje? Proste

[CSS] pobierz, plaintext 
margin: auto; 
[CSS] pobierz, plaintext

czy nawet

[CSS] pobierz, plaintext 
margin-top: 50%; 
[CSS] pobierz, plaintext

i nie trzeba tutaj żadnej wiedzy. A jeżeli to ma być jakiś div który ma się znajdować nad innymi, to

[CSS] pobierz, plaintext 
position: absolute; top: 50%; left: 50%; 
[CSS] pobierz, plaintext

i po sprawie.

mortus

2.04.2012, 08:14:54

@by_ikar: Żaden z podanych przez Ciebie stylów CSS nie wyśrodkuje div-a w pionie. margin: auto nie zadziała w ogóle, margin-top: 50% przesunie div-a poniżej połowy strony, tak, że górna jego krawędź będzie w połowie. Jedynie trzecia propozycja przy ustawieniu dodatkowych atrybutów CSS zadziała jak trzeba:

[CSS] pobierz, plaintext 
div {
  margin-top: -250px;
  margin-left: -300px;
  width: 600px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
}
[CSS] pobierz, plaintext

choć nie zagwarantuję, że będzie to działać na wszystkich przeglądarkach. Alternatywą jest obliczenie pozycji div-a w JavaScript i nadpisanie stylu CSS.

Sexee

2.04.2012, 15:15:11

No tak.. to nie ma tego co chciałem

Cytat

centering(#div);

I byłoby git a tak to jakieś pierniczenie się z marginesami. Jak to nie zadziała to odpuszczę to sobie bo szkoda na to czasu.

Plusy dla was

by_ikar

3.04.2012, 11:31:57

Cytat(mortus @ 2.04.2012, 09:14:54 )

W przypadku margin: auto, nie byłem pewien, dlatego podałem margin-top: 50% jako dodatek, a nie jedyne użycie, tyle że o tym nie wspomniałem.. Można to również zrobić marginesem, tyle że nie będzie to tak uniwersalne, ponieważ margines górny/dolny trzeba określić w zależności od wielkości elementu: http://jsfiddle.net/4d7sb/ im większy element, tym margines dolny/górny jest mniejszy. Można dodać do tego position absolute, można pobawić się w position fixed. Jak komu jest to potrzebne.

adrianbienias.pl

10.05.2012, 22:30:56

dość proste i skuteczne rozwiązanie:

[HTML] pobierz, plaintext 
<!DOCTYPE>
<html>
<head>
<style>
#div{
	width:300px; 
	height:400px;
	background:blue;
	display: table-cell;
	vertical-align: middle;
}
#center{
	height:50px;
	width:200px;
	margin:0 auto;
	background:red;
}
</style>
</head>
 
<body>
 
<div id="div">
	<div id="center">
		wycentrowany wertykalnie div
	</div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.