Div et css centrer txt verticalement

Résolu/Fermé

Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 - 18 juil. 2008 à 12:29
djey1301 - 1 nov. 2011 à 14:41

Bonjour,
je souhaite centrer le texte verticalement dans mon tableau.
j'utilise des <div> mais le texte se trouve en haut de la cellule.

CSS:

div.nav { text-align:right; vertical-align:middle; background-image:url(nav.png); height: 33px; border:hidden;}

PAGE:

<td height="34" colspan="2" >
<div class="nav">
<table width="392" border="0" align="left" cellpadding="0" cellspacing="0" id="navigation">
<tr>
<td width="67" align="center" nowrap="nowrap" class="navText"><a href="index.php" class="Style3">Accueil</a></td>
<td width="58" align="center" nowrap="nowrap" class="navText"><a href="jsp/index.php" class="Style3">JSP</a></td>
<td width="119" align="center" nowrap="nowrap" class="navText"><a href="formateurs/index.php" class="Style3">Formateurs</a></td>
<td width="148" align="center" nowrap="nowrap" class="navText"><a href="contact.php" class="Style3">Nous contacter</a></td>
</tr>
</table>
</div>

Merci pour votre aide. bonne journée

A voir également:

Div et css centrer txt verticalement
Div c++ - Télécharger - Langages
Word fractionner verticalement ✓ - Forum Word
Css lien non souligné - Astuces et Solutions
Diviser une cellule excel en deux verticalement - Forum Excel
Photoshop centrer texte verticalement ✓ - Forum Photoshop

2 réponses

Réponse 1 / 2

djey1301
1 nov. 2011 à 14:41

C'est pas le valigne qui fonctionne dans ton CSS tu as fait un centrage par line-height.
Dans le cas ou l'un des intitulés ceserait plus long, et que tu as une largeur définie, ca ne marcherais pas ton centrage.

CSS :

#nav {
	float: left;
	border: 1px solid #CCCCCC;
}
#nav a {
        width:100px;
	text-align:right;
	vertical-align:middle;
	height: 33px;
	float: right;
	padding: 2px 15px;
	line-height: 33px;
}

HTML :

<div id="nav">
	<a href="index.php" class="Style3">Accueil</a>
	<a href="jsp/index.php" class="Style3">JSP</a>
	<a href="formateurs/index.php" class="Style3">Formateurs</a>
	<a href="contact.php" class="Style3">Nous contacter ou pas !!</a>
</div>

Réponse 2 / 2

Nxt Messages postés 41 Date d'inscription mercredi 28 mai 2008 Statut Membre Dernière intervention 2 janvier 2009 18
18 juil. 2008 à 12:59

Perso je ferai comme ci-dessous, les table c'est pour les tableaux :) pas pour les menu. J'ai mit un contour gris autour de la div juste pour que tu vois que le texte est centré dedans.

css :

#nav {
	float: left;
	border: 1px solid #CCCCCC;
}
#nav a {
	text-align:right;
	vertical-align:middle;
	height: 33px;
	float: right;
	padding: 2px 15px;
	line-height: 33px;
}

html :

<div id="nav">
	<a href="index.php" class="Style3">Accueil</a>
	<a href="jsp/index.php" class="Style3">JSP</a>
	<a href="formateurs/index.php" class="Style3">Formateurs</a>
	<a href="contact.php" class="Style3">Nous contacter</a>
</div>

Nico_ Messages postés 1219 Date d'inscription vendredi 29 décembre 2006 Statut Membre Dernière intervention 15 mars 2016 189
18 juil. 2008 à 13:53

merci ça fonctionne.
bonne journée

Discussions similaires

Codage de texte

Masque diapositives : superposition image et forme

trait horizontal avec du css

comment remplacer un #div/0! par une cellule vide

centrer un texte dans un bloc