centrare verticalmente immagine e testo

**ricman** · 23-03-2009, 09:51

Ad esempio puoi asseganre il line-height di 60px al div

**ricman** · 23-03-2009, 10:37

<div style="height:60px; line-height:60px; background-color: #99CCFF">
[img]tech.png[/img] prova
</div>

**ricman** · 24-03-2009, 01:34

Potresti provare a mettere il testo dentro un span e dargli il padding-bottom di 10px

**Gufo** · 24-03-2009, 04:15

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">.allinea-1 {
	border: none;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 100px;
}

.allinea-1-1 {
	border: none;
	height: 60px;
	left: 0px;
	line-height: 60px;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 62px;
}

.allinea-1-2 {
	border: none;
	height: 60px;
	left: 62px;
	line-height: 60px;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 38px;
}
</style>
	</head>
	<body>
		<div class="allinea-1">
			<div align="center" class="allinea-1-1">[img]immagine.jpg[/img]</div>
			<div align="center" class="allinea-1-2">Techy</div>
		</div>
	</body>
</html>

**Gufo** · 25-03-2009, 00:29

Originariamente inviato da macsig
grazie gufo per il codice ma il etsto e' centrato al'immagine, cosa devo variare per diminuire lo spazio tra la base dell'immagine e la base del testo?

Quale spazio? Se sono allineati orizzontalmente alla base non c'è nulla

**StefanoFilter** · 28-03-2009, 14:14

ho provato con questo codice

<div class="contenitore">
[img]immagine.jpg[/img]
<div class="testo">
<span>This small paragraph...</span>
</div>
</div>

e il relativo css:

.contenitore{
height:60px;
}

.testo {
position:relative;
height:60px;
float:left;
}

.testo span{
font-size:12px;
white-space:nowrap;

height: 12px;
position:absolute;
top:50%;
margin-top:-6px;
background-color:#CCCCCC;
}

.contenitore img{
float:left;
margin-right:5px;
}

Discussione: centrare verticalmente immagine e testo

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio