Wyświetlanie tekstu obok obrazka bez stosowania position: absolute

Question

Witam.

W kontakcie mam 3 obrazki: skype, gg i mail, a obok tych obrazków mam umieszczoną nazwę do poszczególnego kontaktu.

<div class="contact">
					
	<img src="obrazki/kontakt/skype.png" width="34px" height="34px" style="position: absolute; left: 50px; top: 30px" />
	<span style="color: #FFFF33; font-size: 12px; position: absolute; left: 89px; top: 40px">krzysztofp_160580</span>
	
	<img src="obrazki/kontakt/gg.png" width="34px" height="34px" style="position: absolute; left: 50px; top: 89px" />
	<span style="color: #FFFF33; font-size: 12px; position: absolute; left: 89px; top: 98px">1701539</span>
	
	<img src="obrazki/kontakt/mail.png" width="34px" height="34px" style="position: absolute; left: 50px; top: 148px" />
	<span style="color: #FFFF33; font-size: 12px; position: absolute; left: 89px; top: 158px">krzysiekp1605@o2.pl</span>
	
</div>

.contact
{
	background-color: #000000;
	width: 500px;
	height: 250px;
}

Wiem, że mam to zrobione trochę po amatorsku. Obrazki wraz z tekstem są umieszczone na czarnym tle przy pomocy position: absolute i wszystko wygląda niby ok (precyzja co do piksela).

Wiecie jak umieścić dany tekst obok danego obrazka, aby nie stosować position: absolute?

Zamiast position: absolute lepiej zastosować display: inline?

Wiecie jak profesjonalnie to zrobić?

Answer 1

Zamknij każdy kontakt w liście i usuń position:absolute a css listy: 

display:inline-block;
list-style-type: none;

 

Comments

W HTML-u jakbyś to zapisał?

---

<ol style="list-style-type:none;">
<li>
<img src="obrazki/kontakt/skype.png" width="34px" height="34px" " />
    <span style="color: #FFFF33; font-size: 12px;">krzysztofp_160580</span>
</li> 
<li>
    <img src="obrazki/kontakt/gg.png" width="34px" height="34px"  />
    <span style="color: #FFFF33; font-size: 12px;">1701539</span>
     </li> 
<li>
    <img src="obrazki/kontakt/mail.png" width="34px" height="34px" />
    <span style="color: #FFFF33; font-size: 12px;">krzysiekp1605@o2.pl</span>
     </li> 
</ol>

W css dopisz:

ol >li {
display:inline-block; 
}

 

---

Styl inline usuń bo wygląda nieprofesjonalnie, a także poprawki są uciążliwe

---

Ten Twój zapis nie sprawdza się do końca dobrze.

---

Czemu?

---

W praktyce wygląda to tak:

http://imageshack.com/a/img923/7461/mWqvnk.jpg

Aktualny kod mam taki:

<div class="contact">
							
	<ol style="list-style-type: none">
		<li>
			<img src="obrazki/kontakt/skype.png" width="34px" height="34px" />
			<span style="color: #FFFF33; font-size: 12px">krzysztofp_160580</span>
		</li>
									
		<li>
			<img src="obrazki/kontakt/gg.png" width="34px" height="34px" />
			<span style="color: #FFFF33; font-size: 12px">1701539</span>
		</li>
									
		<li>
			<img src="obrazki/kontakt/mail.png" width="34px" height="34px" />
			<span style="color: #FFFF33; font-size: 12px">krzysiekp1605@o2.pl</span>
		</li>
	</ol>	
								
</div>

 

.contact
{
	background-color: #000000;
	width: 500px;
	height: 250px;
}

.contact ol >li
{
	display: inline-block;
}

Zauważ, że obrazki znalazły się w jednej linii oraz tekst znalazł się na dole obok każdego obrazka.

1. Chciałbym, aby te obrazki znajdowały się jeden pod drugim.

2. Chciałbym, aby tekst znajdujący się obok obrazka był na wysokości środka obrazka.

Wiesz jak to zrobić?

---

Punkt nr 1 ogarnąłem i zapis w CSS wygląda tak:

.contact
{
	padding: 0px 0px 40px;
	width: 500px;
}

.contact ol >li
{
	display: block;
	padding: 40px 0px 0px;
}

Pozostał jeszcze punkt nr 2.

Obecnie tekst znajduje się na dole obok danego obrazka.

Jak zrobić, aby tekst znalazł się na wysokości środka obrazka?