<!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" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vertical align</title>
</head>
<body>
<div style="background-color:#CC9900; height: 300px; ">
<p style="vertical-align:middle; background-color:red">
ciao
</p>
</div>
</body>
</html>
Dove sbaglio?
vertical-align definisce la posizione verticale del contenuto rispetto alla riga in cui si trova ... non controlli la posizione del paragrafo rispetto al div così facendo , così controlli la posizione del testo rispetto al paragrafo .Originariamente inviato da carlostefano
<!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" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vertical align</title>
</head>
<body>
<div style="background-color:#CC9900; height: 300px; ">
<p style="vertical-align:middle; background-color:red">
ciao
</p>
</div>
</body>
</html>
Dove sbaglio?
per default il vertical-align è alla baseline
se vuoi centrare verticalmente il div deviscivere
margin:0 auto;
lo zero lo sostituisci all' occorrenza
Originariamente inviato da ashtur1
se vuoi centrare verticalmente il div deviscivere
margin:0 auto;
lo zero lo sostituisci all' occorrenza
per posizionare c'è la proprietà position con i suoi attributi absolute/relative/static/fixed/inherit
che c'entrano i margini ?
ciao,
però se metto:
<p style="vertical-align:middle; background-color:red; height: 300px">
ciao
</p>
allora dovrei riuscire a centrare il testo all'interno del paragrafo; avevo provato ma non funziona...
Originariamente inviato da Freax
per posizionare c'è la proprietà position con i suoi attributi absolute/relative/static/fixed/inherit
che c'entrano i margini ?
Forse si è confuso con l'allineamento orizzontale su Firefox.
centrarlo verticalmente o orizzontalmente ? per la seconda c'è text-align:centerOriginariamente inviato da carlostefano
ciao,
però se metto:
<p style="vertical-align:middle; background-color:red; height: 300px">
ciao
</p>
allora dovrei riuscire a centrare il testo all'interno del paragrafo; avevo provato ma non funziona...
Originariamente inviato da Freax
centrarlo verticalmente o orizzontalmente ? per la seconda c'è text-align:center
Certo, ma a me serve verticalmente.
guarda che va :Originariamente inviato da carlostefano
Certo, ma a me serve verticalmente.
ho messo un line height (500% significa che la linea è alta 5 volte il carattere del testo , e quindi è in relazione a quest'ultimo , oppure la fissi in px) per rendere più evidente la centratura verticale del testo ...codice:<!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" lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>vertical align</title> </head> <body> <div style="background-color:#CC9900; height: 300px; "> <p style="line-height:500%;vertical-align:middle; background-color:red"> ciao </p> </div> </body> </html>
a me va così
Originariamente inviato da Freax
guarda che va :
ho messo un line height (500% significa che la linea è alta 5 volte il carattere del testo , e quindi è in relazione a quest'ultimo , oppure la fissi in px) per rendere più evidente la centratura verticale del testo ...codice:<!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" lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>vertical align</title> </head> <body> <div style="background-color:#CC9900; height: 300px; "> <p style="line-height:500%;vertical-align:middle; background-color:red"> ciao </p> </div> </body> </html>
a me va così
C'è qualcosa di strano...
hai definito l'altezza del paragrafo attraverso la proprietà line-height. Ok, così anche a me viene centrato verticalmente...in particolare viene centrato anche con questo codice:
<!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" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vertical align</title>
</head>
<body>
<div style="background-color:#CC9900; height: 300px; ">
<p style="line-height:500%; background-color:red">
ciao
</p>
</div>
</body>
</html>
cioè senza usare la proprietà vertical-align, di cui quindi non capisco ancora il significato.
Permessi di invio
Rispondi quotando