28111 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical avec Flex et les balises <a>

Bonjour bonjour Smiley smile

Refaisant mon site web, j'ai voulu appliquer sur mon menu horizontal (liste) un centrage des liens (une boite de 100px sur 50px avec le texte en plein centre - j'ai utilisé cette technique - Flexbox Meth1).

Aucun problème, le lien s'affiche bien au milieu ... est voilà le problème : la zone cliquable ne s'arrête qu'au texte. Or, je veux appliquer cette zone sur tout le bouton mais :
* la propriété height à 100% colle le texte en haut (ça m'arrange pas alors que "width" fonctionne impec)
* padding-top et padding-bottom peut fonctionner (même si c'est plutôt "bancal") mais j'ai un bouton dont le texte occupe déjà tout l'espace dispo (il correspond donc plus à ce que je cherche)
* j'ai pensé à une fonction du genre "padding-top: calc((attr(height) / 2) - 20px)" mais attr() est pas reconnu par Firefox ...


<ul>
        <li><a href="./index.html">Index</a></li>
        <li><a href="./photos.html">Photos</a></li>
        <li><a href="./contact.html">Contact</a></li>
</ul>




ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-content: stretch;
}

li {
    display: flex;
    
    height: 50px;
    min-width: 100px;
    width: 100%;
}

li > a {       
    display: block;
    text-decoration: none;
    width: 100%;
    color: white;
    font-size: 20px;
    text-align: center;

    /*
    height: 100% => texte plus centré
    padding-top: ...px; => peut fonctionner mais pas universel, pas fonctionnel pour un bouton
    padding-top: calc((attr(height) / 2) - 20px) => pas fonctionnel
    */
}



Bref, je sèche un peu. Si vous avez une idée ...
Modifié par Gam (24 Jan 2017 - 17:47)
Bonsoir.

Vos 'li' ont une hauteur fixe de 50px ? J'imagine que vous n'imaginez que ça puisse poser un problème pour vos liens, n'est-pas ? Alors ma solution (pas unanimement appréciée) :
ul
	{
	display : flex;
	flex-direction : row;
	justify-content : space-between;
	flex-wrap : nowrap;
	align-content : stretch;
	align-items : center;
	list-style-type : none;
	margin-left : 0px;
	padding-left : 0px;
	}

li
	{
	height : 50px;
	min-width : 100px;
	width : 100%;
	}

li > a
	{
	display : block;
	text-decoration : none;
	width : 100%;
	color : white;
	font-size : 20px;
	text-align : center;
	background-color : red;
	line-height : 50px;
	}


J'ai mis une couleur rouge pour y voir quelque chose et donc un interlignage de 50px pour centrer le tout en hauteur...

Mais ce serait quand même plus simple si display : contents était disponible pour tous les navigateurs..
Modérateur
Quitte a se servir de flex, autant aller jusq'au fond Smiley smile 
ul {
  display: flex;
  justify-content: space-between;
  align-content: stretch;
}

li {
  display: flex;
  height: 50px;
  min-width: 100px;
}

li > a {
  flex: 1;
  text-decoration: none;
  color: white;
  font-size: 20px;

  /*centrage horizontal et vertical*/
  display: flex;
  align-items: center;
  justify-content:center;

  /* demo, see me */
  box-shadow:0 0 3px;

}
Meilleure solution
Sujet clos
Aller à