Piotr Nalepa

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