[CSS] Jak wyśrodkować obrazek w tekście?

Dzisiejszy artykuł będzie dotyczył problemu uzyskania efektu wyśrodkowania obrazku w tekście. Nie będzie to typowe wyśrodkowanie, bo obrazek będziemy chcieli wyśrodkować pomiędzy dwoma znacznikami <div>. Efekt ten jest szczególnie przydatny na stronach, które zawierają dużo tekstu, takich jak serwisy informacyjne czy blogi podróżnicze i nie tylko.

Efekt będzie czymś w rodzaju float: center; który normalnie nie istnieje w CSS, ale czasem mógłby się okazać przydatny.
Na początek musimy stworzyć odpowiednią strukturę HTML naszego pliku. W tym przykładzie będzie wyglądała następująco:

<div id="content">
	<img src="1.jpg" />
	<div id="lewy">
		<h2>Art 1</h2>
		<p>Jakiś tekst ..... </p>
	</div>
	<div id="prawy">
		<h2>Art 2</h2>
		<p>Jakiś tekst może być dłuższy .....</p>
	</div>
</div>

Możesz zauważyć, że obrazek został umieszczony przed kontenerami zawierającymi tekst.
Mając tak przygotowaną strukturę możemy przejść do edycji kaskadowego arkusza stylów, czyli do edycji CSS. Kod CSS odpowiedzialny za uzyskanie efektu wyśrodkowania wygląda nastepująco:

#lewy {
    float: left;
}
#prawy {
    float: right;
}
#lewy:before, #prawy:before {
  content: "";
  height: 156px; /*tutaj wstawiamy wymiary obrazka*/
  width: 117px; /*tutaj wstawiamy wymiary obrazka*/
}
#lewy:before {
  float: right;
}
#prawy:before {
  float: left;
}
#prawy h2 {
    text-align: right;
}
#content {
    position: relative;
    height: 100%;
}
#content img {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -117px; /*margines lewy jest równy połowie szerokości obrazka*/
}

W ten sposób za pomocą odpowiednich pseudoklas - :before oraz odpowiedniemu pozycjonowaniu elementów jesteśmy w stanie wyśrodkować obrazek pomiędzy dwoma kontenerami z tekstem.
Tutorial ten powstał na podstawie anglojęzycznego artykułu.
Demo z tego artykułu jest dostępne pod tym adresem: wyśrodkowanie obrazka w tekście