Alignement verticial de texte

Le 14/01/11 12:16, Stéphane Santon a écrit :

Bonjour,

J'ai une balise <a> dans un <li> pour faire un bouton carré.
<li> a une image de fond, centrée ou en haut.

on doit donc supposer/comprendre que ce LI est dimensionnée en carré ?

<a> est à { width: 100%; height: 100%; } pour avoir le maximum de
surface de clic (pour mobiles) et contient un texte.

Soit ...

Comment aligner le texte du <a> en bas de sa surface ?

Voilà qui a l'air OK avec mes Fx, Opera, Safari :


ul { list-style: none; margin:0; padding:0; width:150px }
ul li { height: 150px;
position: relative;
background:url(../Image2.png) no-repeat top center #eee;
margin-top: 5px; }
li a { display: block; height: 100%; }
li a span { display: block;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
}

<ul>
<li><a href="#A"><span>test 1</span></a>
<li><a href="#B"><span>test 2</span></a>
<li><a href="#C"><span>test 3</span></a>
</ul>



--
Stéphane Moriaux avec/with iMac-intel

Bonjour,

Ah oui le span dans le <a>...
Trop fort encore SAM !! MER-CI :-D

Et dis-donc, avec le développement de html5 et les Web-applis hors
ligne, le Javascript va renaître...
Du taf sur la planche !!

Sincères salutations

SAM a écrit :

Le 14/01/11 12:16, Stéphane Santon a écrit :

Bonjour,

J'ai une balise <a> dans un <li> pour faire un bouton carré.
<li> a une image de fond, centrée ou en haut.

on doit donc supposer/comprendre que ce LI est dimensionnée en carré ?

<a> est à { width: 100%; height: 100%; } pour avoir le maximum de
surface de clic (pour mobiles) et contient un texte.

Soit ...

Comment aligner le texte du <a> en bas de sa surface ?

Voilà qui a l'air OK avec mes Fx, Opera, Safari :


ul { list-style: none; margin:0; padding:0; width:150px }
ul li { height: 150px;
position: relative;
background:url(../Image2.png) no-repeat top center #eee;
margin-top: 5px; }
li a { display: block; height: 100%; }
li a span { display: block;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
}

<ul>
<li><a href="#A"><span>test 1</span></a>
<li><a href="#B"><span>test 2</span></a>
<li><a href="#C"><span>test 3</span></a>
</ul>

--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu