28220 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical d'un texte dans un

Bonjour,

je sais que ce sujet revient souvent mais je n'ai pas trouvé solution à mon problème... Smiley decu

J'ai essayé la méthode de la FAQ :
#truc {
	height: 424px;
	text-align: center;
	background-color: #017671;
	
	display: table-cell;
	vertical-align: middle;
}
<div id="truc">blabla,<br />
		re blabla bla.<br />re re bla bla blaaaaaaaaaa</div>

> Firefox : OK
mais avec problème de largeur du <div> dès l'instant ou je rajoute display: table-cell; vertical-align: middle;

> IE6 : pas OK...
aucune différence Smiley decu

Comment dois-je faire dans mon cas ?

Merci d'avance... Smiley cligne
Modifié par Tchupacabra (19 Oct 2005 - 19:07)
Tout à fait normal que la largeur du bloc change, puisque tu le définis comme une cellule de tableau, or les cellules sont des éléments "inline". Donc tu dois définir sa largeur sans quoi il ne sera pas plus large que le texte qu'il contient...

Pour IE, ben là je peux pas t'aider désolé Smiley langue
Administrateur
Tchupacabra a écrit :

> IE6 : pas OK...
aucune différence Smiley decu

Oui, il me semble bien que la FAQ explique que IE ne reconnait pas la valeur "table-cell".
Elle donne 4 pistes. Certaines fonctionnent sous IE.
essaie de definir une classe pout ton texte 
 .text
{width:cellequitefaut;
height:cellequitefaut;
margin-top:50%;
margin-bottom:50%
}
<body>
<div id=""><span class="text">blablabla</span></div>
@jp949 : ça marche pas ton truc.... Smiley decu 

 .text {
	width: 684px;
	height: 424px;
	margin-top: 50%;
	margin-bottom: 50%;
}
<div><span classe="text">blabla,<br />
re blabla bla.<br />re re bla bla blaaaaaaaaaa</span></div>
> aucune mise en forme....

@Raphael :

1/ Les marges négatives
> ça correspond pas à ce que j'essaye de faire...

2/ La méthode line-height de http://marcarea.com
http://marcarea.com/weblog/index.php/?2004/10/18/182-10-astuces-css-correction
#box {
	width: 684px;
	height: 424px;
	margin: 0;
	padding: 10px;
	color: fuchsia;
	font: bold 12px/424px verdana;
	border: solid;
}
<div id="box">blabla,<br />
re blabla bla.<br />re re bla bla blaaaaaaaaaa</div>
> une interligne de 424px à chaque ligne, c'est pas terrible...

Y a donc plus que la solution du tableau d'une seule cellule ?

@+ Smiley atchoum
Tchupacabra a écrit :
<div><span classe="text">blabla,<br />
re blabla bla.<br />re re bla bla blaaaaaaaaaa</span></div>


enlève le 'e' à 'class' , je pense que celà viens de là !
Administrateur
Tchupacabra a écrit :

Y a donc plus que la solution du tableau d'une seule cellule ?

Bah, si c'est la seule qui convienne et si tu veux absolument créer un alignement vertical dans un média non paginé, oui.
Si il y a une solution sans avoir a passer par une table... enfin si j'ai bien compris ton problème Smiley cligne

tu peux utiliser un " line-height:30px; " ou autant que tu veux dans ton #truc pour centrer verticalement... ça sera statique, mais ça passe sous ie
Sujet clos
Aller à