28111 sujets

CSS et mise en forme, CSS3

Salut ^^

Ben là franchement c'est louche...
Je veux positionner des liens dans ma page, au milieu de la div :

XHTML :
<div id="barre">
  <a href="./accueil.php">Accueil</a> | <a href="./accueil.php">Accueil</a> | <a href="./accueil.php">Accueil</a> | <a href="./accueil.php">Accueil</a> | <a href="./accueil.php">Accueil</a>
  </div>


CSS :
#barre {
border-top: 0.2em #000000;
border-top-style: ridge;
text-align: center;
height: 2em;
}
#barre a {
font-size: 1.1em;
}


Le text se positionne en haut (2em => 20px). Mais si je met un "vertical-align: middle" dans '#barre' (ou dans '#barre a'), ça change rien pour les liens, et le trait '|' est un peu décalé, mais il est toujours pas au milieu de la hauteur Smiley confus

En HTML ça marche impec en plus... Smiley confus

Quelqu'un aurait une idée, svp ? (ça fait déjà deux fois que j'ai le même problème Smiley confus )
Modifié le 14 Jan 2005 - 19:24
Je suis vraiment très désolé pour le flood, mais j'ai trouvé lol ^^

Faut utiliser un line-height (j'ai pas encore en tête tous les attributs CSS, super pratique la liste, le lien est sur le site Smiley langue )
Administrateur
En fait, en ayant fait une Recherche sur le forum, tu aurais trouvé un grand nombre de posts qui répondent à ta question Smiley smile

Voici donc, une fois de plus, des explications sur le centrage vertical :
- S'il n'y a qu'une seule ligne de texte à centrer, la meilleure solution reste d'utiliser line-height, comme c'est expliqué ici :
http://marcarea.com/weblog/index.php/2004/10/18/182-10AstucesCssCorrection
- Sinon il reste une solution plus lourde : positionner la cellule en relatif et centrer le div à l'aide de position absolue + marges négatives : http://www.alsacreations.com/articles/centrer/

Et un autre rappel pour tous ceux qui espèrent utiliser la propriété "vertical-align" pour centrer leur texte dans un bloc :

Attention à bien comprendre ce que signifie Vertical align en CSS

Doc CSS2 a écrit :
S'applique à : ceux des éléments de type en-ligne et à l'élément 'table-cell'

Doc CSS2 a écrit :
Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.

Note : la signification des valeurs pour cette propriété est légèrement différente dans le contexte des tables. Consulter le chapitre traitant des algorithmes pour la hauteur des tables pour le détail.


Vertical align n'est pas prévu pour aligner un texte dans un bloc, mais un élément en-ligne dans un autre élément en-ligne (par exemple une image à côté d'un texte)... ou dans un élément de type table-cell.