Alignement vertical dans un div

Bonjour à tous,

Je suis en train de refondre mon site. Pour les rubriques, j'ai mis des boutons, avec les intitulés sur une ou deux lignes, selon leur longueur :

http://images3.hiboox.com/images/1008/zf74szar.jpg

Je cherche à aligner verticalement (sur la ligne du bas) mes intitulés. Seulement je souhaite que mon site soit le même sous toutes les résolutions. J'avais commencé par mettre un <br /> lorsque je n'avais qu'une ligne de texte mais ce n'est pas satisfaisant sur les grandes résolutions.

Je suis tombé sur la FAQ avec les liens relatifs au forum (qui décrivent , et sur la traduction de la recommandation CSS2. Seulement je ne comprend pas tout...

Voici le code que j'ai pour l'instant :

Code HTML :

<div id="contenu">
<div class="rubriques">
<div class="bouton">
<a href="#" class="bouton_lien">Actualité</a>
</div>
</div>

Code CSS :

body div#milieu div#contenu div.rubriques div.bouton a {
width : 98%;
display : block;
border-bottom : 1px solid #e0711a;
font-weight : bold;
text-decoration : none;
text-align : center;
color : rgb(0, 0, 0);
background-color : rgb(255, 255, 255);
}

Sur la recommandation, je ne comprend pas ce paragraphe en particulier :

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.

Le vertical-align est-il applicable aux liens qui sont dans un div ? La balise <a> est de type en-ligne il me semble, dans ce cas pourquoi cela ne fonctionne pas ? Faut-il considérer les liens comme un bloc ?

Merci pour votre aide et désolé pour la redite, c'est un sujet qui revient fréquemment mais là malgré les lectures j'ai du mal à comprendre...

Jarodd
Modifié par Jarodd (05 Mar 2008 - 23:26)

bonsoir

vertical-align s'applique
- aux elements de type inline , il en en faut au moins 2 pour qu'il s'alignent l'un sur l'autre.

- au cellule de tableau , pour percevoir l'alignement , la cellule doit etre plus haute que l'epace occupé par son contenu qui se trouvera aligné dans celle-ci (top,middle,bottom => of la cellule).

Le reste de la faq te mène vers des alternatives possibles (soumises a conditions et fragiles) qui cherchent a reproduire le comportement naturel d'une cellule de tableau .
Si ces pistes sont difficile a comprendre ou a mettre en œuvre , peut-être tenter un tableau ou ne pas se fixer un objecif qui ne sera peut-être pas atteint de façon sereine.

gc
Modifié par gcyrillus (06 Mar 2008 - 01:34)