Forum PHP.pl > [HTML]Wycentrowanie div'ów w poziomie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML]Wycentrowanie div'ów w poziomie

andrzej7322

30.09.2010, 16:36:13

Wiatm, mam problem chcę wycentrować trzy divy w poziomie żeby byly obok siebie gdy użyje funkcji center i nie mam w css ustawione float :left to divy centruja sie tylko ze ukladaja sie w pionie wszystkie jeden pod drugim a ja potrzebuje wycentrowac w ten sposob aby byly obok siebie na srodku strony.

Z góry dziękuję za pomoc.

Skie

30.09.2010, 16:47:02

DIV domyślnie przyjmuje wartość width i height na 100%, więc jak chcesz je układać koło siebie, musisz ustawić inne rozmiary, tak by się mieściły na stronie.

andrzej7322

30.09.2010, 17:16:06

Już tak robiłem ale nie działa to wygląda tak

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<body><center>
<center>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
				</center>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
.product{
width:100px;
height:100px;
background:red;
margin:5px;
}
[HTML] pobierz, plaintext

ShadowD

30.09.2010, 18:14:27

div to element blokowy, a one zawsze się tak układają, albo dasz mu display:inline, albo float left..

Crozin

30.09.2010, 18:21:15

Cytat

DIV domyślnie przyjmuje wartość width i height na 100%

Elementy blokowe mają domyślnie szerokość na 100%, ale wysokości już to nie dotyczy.

Cytat

to wygląda tak

Twój kod XHTML jest niepoprawny:

1. Jest niesemantyczny.
2. Elementów typu CENTER się nie używa - od tego jest CSS.

Co do problemu: nadaj produktom display: inline-block;, a ich kontenerowi text-align: center;.

Skie

1.10.2010, 16:05:01

Mówiąc o 100% domyślnie przyjmowanej wysokości miałem na myśli minimum potrzebne do wyświetlenia danego elementu - źle mnie zrozumiałeś lub źle to wyraziłem, skoro pomyślałeś że chodziło mi o element nadrzędny.

Co do pozycjonowania to napisałem wszystko wyżej - ustalić width, height i float i wystarczy. Żadnego display: inline-block nie potrzeba przy DIVach.

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.