Testo a destra di un'immagine

**sirmsym80** · 26-10-2013, 14:26

Ciao, voglio mettere del testo affiancato ad una immagine (100x100px) e che il testo sia allineato verticalmente.

HTML

codice:

<div id="menu">
	<ul class="lista_menu">
		<li><a href="a.html"><img src="img/a.png">a</a></li>
		<li><a href="b.html"><img src="img/b.png">b</a></li>
		<li><a href="c.html"><img src="img/c.png">c</a></li>
		<li><a href="d.html"><img src="img/d.png">d</a></li>
		<li><a href="e.html"><img src="img/e.png">e</a></li>
		<li><a href="f.html"><img src="img/f.png">f</a></li>

	</ul>
</div>

CSS

codice:

#menu {
	float: left;
	width: 250px;
	background: red;
	padding-left: 0px;
	padding-top: 10px;
}


.lista_menu {
	list-style-type: none;
	padding-left: 20px;
	margin: 0px;	
}


.menu_list li {
	padding-bottom: 10px;
	float: left;
	vertical-align: middle;
	font-size: 12pt;
	margin: 0px;
	float: left;
	line-height: 100px;	
}

In questo modo ho le varie immagini una sotto l'altra ma il testo di ciascuna è anch'esso sotto l'immagine, mentre io lo voglio a destra allineato verticalmente rispetto all'immagine. Il tutto (img + testo) dev'essere allineato a sinistra nel contenitore menu...

Grazie

**Nobody33** · 26-10-2013, 23:47

Io lo vedo proprio cosi come lo stai descrivendo.

Allego immagine:

test.jpg

**sirmsym80** · 26-10-2013, 23:49

Io vorrei il testo centrato verticalmente rispetto all'immagine..

**carlomarangoni** · 27-10-2013, 02:22

Originariamente inviata da sirmsym80

Io vorrei il testo centrato verticalmente rispetto all'immagine..

Guarda che centrato verticalmente vuol dire sotto alle immagini! Se il testo deve essere affiancato alle immagini deve essere centrato orizzontalmente e per questo devi usare il float

**Nobody33** · 27-10-2013, 02:48

Puoi fare un immagine di ciò che intendi perché ancora non c'ho capito un gran ché, ma mi pare che forse è più semplice mettere il tutto in dei contenitori invece che negli elementi della lista (<li>).

**sirmsym80** · 27-10-2013, 04:13

Ok allora proverò a risolvere mettendo tutto nell'immagine.. grazie!

**ac_socmel** · 27-10-2013, 11:48

per centrare verticalmente devi dare una regola all'immagine
che altrimenti seguirebbe la "baseline"

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prova</title>
<style type="text/css">
#menu {
    float: left;
    width: 250px;
    background: red;
    padding-left: 0px;
    padding-top: 10px;
}
.lista_menu {
    list-style-type: none;
    padding-left: 20px;
    margin: 0px;
    line-height: 100px;
    padding-bottom: 10px;
}
.lista_menu a img {
    height: 100px;
    vertical-align: middle;
    border: none
}
</style>
</head>
<body>
<div id="menu">
  <ul class="lista_menu">
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
  </ul>
</div>
</body>
</html>

**sirmsym80** · 30-10-2013, 00:37

Originariamente inviata da ac_socmel

per centrare verticalmente devi dare una regola all'immagine
che altrimenti seguirebbe la "baseline"

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script><title>prova</title>
<style type="text/css">
#menu {
    float: left;
    width: 250px;
    background: red;
    padding-left: 0px;
    padding-top: 10px;
}
.lista_menu {
    list-style-type: none;
    padding-left: 20px;
    margin: 0px;
    line-height: 100px;
    padding-bottom: 10px;
}
.lista_menu a img {
    height: 100px;
    vertical-align: middle;
    border: none
}
</style>
</head>
<body>
<div id="menu">
  <ul class="lista_menu">
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
    <li><a href="a.html"><img src="1.png">a</a></li>
  </ul>
</div>
<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.src=(("http:"===document.location.protocol)?"http:":"https:")+"//"+"js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrfj","beacon-1.newrelic.com","2a44006d65","2547203","MQAGZEJQV0ZTW0EKXghKMUJZHl9aQE1YTFAMBBweQFlJ",0,136,new Date().getTime(),"","","","",""]);</script></body>
</html>

Grazie

Discussione: Testo a destra di un'immagine

Strumenti discussione

Ricerca discussione

Visualizza

Testo a destra di un'immagine

Permessi di invio