Obrazki są po lewej, a tekst ma być po prawej stronie obrazków, ale po środku.

Question

Witam.

Mam takie banalnie proste pytanie, ale u mnie to nie działa.

Mam 3 obrazki po lewej, a tekst ma być po prawej stronie obrazków, ale po środku. U mnie tekst co prawda jest po prawej stronie, ale niestety nieco wyżej jak po środku.

Co muszę poprawić w kodzie, aby tekst po prawej stronie był po środku względem obrazków?

<p>Kontakt:</p>
	<div class="skype">
		<img src="obrazki/skype.png" style="float: left" />
			<p style="color: yellow; font-size: 14px">Skype</p>
	</div>
	<div class="gg">
		<img src="obrazki/gg.png" style="float: left" />
			<p style="color: yellow; font-size: 14px">GG</p>
	</div>
	<div class="mail">
		<img src="obrazki/mail.png" style="float: left" />
			<p style="color: yellow; font-size: 14px">mail</p>
	</div>

.skype, .gg, .mail
{
	margin-bottom: 35px;
	margin-top: auto;
}

Answer 1

ja napis zamknął bym w divie, któremu nadał bym padding górny i dolny tak żeby się tekst wyśrodkował w poziomie, albo zamiast paddingu margin.

Answer 2

Ja bym pozamieniał znaczniki <p> na <span>, z <img> zdjął float: left i odpowiadając na pytanie nadałbym tym <img> css-a:

vertical-align: middle;

(nie wiem czy z float-em to działa)

Comments

Zastosowałem taki zapis i teraz jest elegancko:

<div class="skype">
	<img src="obrazki/skype.png" width="36px" height="36px" style="vertical-align: middle" />
		<span style="color: yellow; font-size: 14px">Skype</span>
</div>

Wielkie dzięki za wskazówkę.

A teraz mam ostatnie pytanie.

Jak zrobić, aby tekst był nieco oddalony od obrazka, np. o 10px? Oczywiście nie chcę używać żadnych spacji.

---

Nie będę jednak oddalał tekstu od obrazków. Pozostawię tak jak było wcześniej.

Jeszcze raz dzięki za pomoc.