search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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

  • Czy to before jest obslugiwane przez wszystkie przegladarki?

  • Niestety, nie jest. Są problemy z Internet Explorerem w wersjach od 8 i niższymi. Obrazek nachodzi na tekst. To jest jedyna wada tego rozwiązania, ale myślę że warto ją znać.
    Zawsze też można spróbować wykorzystać ten plugin do obsługi tych pseudoklas – http://jquery.lukelutman.com/plugins/pseudo/

  • Damian

    Dzięki. Przyda się ta metoda 😉

  • Piotr

    A czy nie lepszym rozwiązaniem jest zastosowanie czegoś takiego:
    [html]
    sdfjsldjflsdfjlsdfsdf sdfjsld fgdfgdfgdsf
    [html]

    i do tego css
    [css]
    img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    [/css]

    działa raczej wszędzie