Discussion :

[bigltnt]

Bonjour,

Je suis actuellement sur la rédaction du CSS pour mon site. Je souhaite d'une manière ou d'une autre aligner verticalement et à droite un morceau de texte dans un bloc <div>, et suis près à rajouter des balises intermédiaires si nécessaires pour y arriver .

Mais rien n'y fait !
Je ne sais pas pourquoi tous mes "vertical-align" ne fonctionnent pas, et sachant que je suis en position relative, je ne peux pas bidouiller avec les pixels.

Voici mon petit bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#entete {
	height: 20%;
	width: 100%;
	padding-right: 2%;
	margin: auto;
	background-image: url("img/background.png");
	border: 1px solid orange;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="entete"><span>INTRANET</span></div>

(oui j'ai essayé la solution pas propre avec des spans

J'ai farfouillé sur les sites et forums mais j'ai rien compris à leur bidouilles qui en plus marchent avec les pixels, pas possible pour moi qui tiens absolument a garder les positions relatives.

Si qqun pouvait m'expliquer clairement (chuis un peu dur de la comprenette ) je lui devrais une reconnaissance a vie !

Merci

[Bisûnûrs]

vertical-align centre les élement inline verticalement entre eux, ça ne centre verticalement pas du texte (ou une image) dans un élement de type block.

Rajoute :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

line-height:20%;

[bigltnt]

Et bien j'ai essayé, mais ce ne fait que bouger le décalage de mes <div> entre-eux et mon texte ne veut rien savoir ....
Je sais pas trop quoi faire si je rejoute des <br/> ca va faire crado !

[bigltnt]

Re-bonjour.

J'ai trouvé la solution:

-J'imbrique le texte du <div> dans un <span> et:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#entete span {
	position: relative;
	top: 30%;
	right: 2%;
}
#entete img {
	float: left;
	position: relative;
	top: 25%;
	left: 2%;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="entete"><img src="../img/logo.jpg"/><span>INTRANET</span></div>

Voila, et ca marche ! Mon texte est bien aligné. J'espère que je v pas avoir de mauvaises surprises par la suite ....