chevron-left chevron-right

[CSS] Równomierne rozmieszczenie wielu elementów w jednej linii

W dzisiejszym artykule postanowiłem poruszyć kwestię wyrównywania położenia elementów w jednej linii.
Z pozoru, wydaje się to banalnym problemem do rozwiązania, ale można go rozwiązać na kilka sposobów. Dzisiaj zaprezentuję sposób związany z atrybutem inline-block i white-space. Myślę, że może się to przydać Tobie.

Na początek musimy zbudować strukturę takiego obiektu na stronie. Przyjmie on postać następująca:

<div id="blok">
	<div class="element">
		<p><img src="1.jpg"/></p>
	</div>
 
	<div class="element">
		<p><img src="2.jpg"/></p>
	</div>
 
	<div class="element">
		<p><img src="3.jpg"/></p>
	</div>
 
	<div class="element">
		<p>Jakiś box wyśrodkowany</p>	
	</div>
</div>
Jak widać, zdefiniowałem sobie 4 elementy środkowe, z czego 3 są obrazkami, a ostatni zwykłym tekstem.
W takie elementy można umieszczać jakąkolwiek zawartość strony internetowej, bo to tutaj nie ma znaczenia co będzie w środku takiego elementu.

Kolejnym krokiem jaki musimy zrobić to zdefiniowanie stylu dla tych elementów strony, dzięki którym elementy "automagicznie" będą się ładnie środkować w obiekcie nadrzędnym. Kod CSS wygląda następująco:

#blok {
	background: #333;
	text-align: center;
	white-space: nowrap;
	font-size: 20px;
	letter-spacing: 35px;
	line-height: 12px;
	overflow: hidden;
	padding: 10px;
	width: 800px;
}
.element {
	width: 130px;
	height: 130px;
	border: solid 1px #ccc;
	display: inline-block;
	letter-spacing: normal;
	font-size: normal;
	white-space: normal;
	text-align: normal;
	vertical-align: middle;
}
Jeśli zależy Ci na kompatybilności z IE6 (której obsługę polecam Ci porzucić, bo to jest archaizm), to możesz dopisać do arkusza stylów następujący wpis ukierunkowany tylko dla Internet Explorera w wersji 6.
Musisz jednak wiedzieć, że taki zabieg sprawi, że arkusz CSS nie będzie się poprawnie walidował w standardzie W3C. Kod wygląda następująco:
.element {
	*display: inline;
	*margin: 0 20px 0 20px;
}
To by było na wszystko. Jeśli chciałbyś sprawdzić działanie takiego kodu, to zapraszam tutaj: wyśrodkowanie elementów w jednej linii

  • Michał

    Trafiłem tu przez google. Blog trafia do rss.

    Przykład dział świetnie, ale dla takich początkujących kodoklepków jak ja przydałoby ię jeszcze napisać jak to działa. 🙂

    pozd.

  • Mariola

    Mój komentarz został źle wyświetlony. Chodziło mi to to:

    Czy umieszczanie znacznika img w znaczniku p jest zgodne ze standardami W3C?

  • Piotr Nalepa

    Nie widzę żadnych przeciwskazań, aby nie wstawiać znacznika img wewnątrz znacznika p.

  • Mariola

    Zawsze wydawało mi się, że to troszkę lenistwo 😉

    Jeszcze jedno pytanie jeśli można. Często spotykam się z tym, że niektórzy nie używają znacznika p. Określony tekst wrzucają bezpośrednio do div-a. Co o tym myślisz? Ja osobiście zawsze używam p, h1 itp.

  • Piotr Nalepa

    Zazwyczaj tekst należy zamieszczać w odpowiednich semantycznie kontenerach typu: p, span, blockquote, itd., itp. Nie dopuszczam innych przypadków.