Centrer verticalement le texte dans un menu qu'il y ait 1 ou 2 lignes

Bonjour à tous et à toutes,

J'ai un menu avec sur certains boutons le texte sur une ligne et sur d'autres deux lignes.
Quand c'est sur deux lignes, c'est bien centré verticalement mais quand je n'ai qu'une seule ligne, le texte est positionné en haut du bouton.
(Comme l'indique le titre de ce sujet) Je souhaiterais centrer verticalement le texte dans un menu, qu'il y ait 1 ou 2 lignes.
J'ai trouvé le tuto Comment centrer verticalement sur tous les navigateurs ?, mais je ne sais pas quelle méthode est la mieux adaptée à mon cas. Avec ça, j'ai testé "Centrer verticalement via position: absolute", mais ça ne va pas.
Voici les classes comme elles apparaissent dans la feuille de style :

.top_menu > ul > li > a, .top_menu .stickUpHolder > ul > li > a

Pour moi, dans mon cas,
- Le parent, c'est <li>
- L'enfant c'est <a>
J'ai donc ajouté (parce qu'elle n'y était pas) la propriété

position:relative;

à <li> et

position:absolute;
top: 50%;
transform: translateY(-50%);

à <a>
Résultat : Disparition de mon menu (mais pas du texte, mais celui-ci se chevauche).
Même chose si j'applique la position relative non pas à <li> mais à <ul>.
Si je ne mets pas/change pas les propriétés Position, ça n'est pas tellement mieux : j'ai mon menu, mais le texte est trop haut et changer les valeurs pour les propriétés top et/ou transform ne change rien.

Je sèche, c'est pourquoi je sollicite votre aide.
Je ne sais pas quoi ajouter/modifier comme propriété(s) et où pour avoir ce que je souhaite.

Je vous remercie par avance pour vos réponses.
Bonne journée
Modifié par spip93 (27 Jul 2016 - 17:50)

Hello,

Vite fait avant de partir, je pense qu'il y a un problème car le parent du <a> n'est pas <ul> mais <li>. C'est donc a priori <li> qui devrait être en position relative.

Ceci dit, si ton niveau de compatibilité navigateur le permet, la meilleure solution, serait de loin :

.top_menu li {
  display: flex;
  justify-content: center;
  align-items: center;
}

Et c'est réglé (sauf si tu as d'autres contraintes que je ne connais pas)

salut,
pour garder un côté plus dynamique et ne pas avoir à te soucier des dimensions, tu devrais laisser tomber le positionnement absolue et passer soit, comme suggéré par le display: flex, soit avec l'alternative des display: table

Salut,

Merci à tous les deux pour vos réponses.
Raphael, j'ai essayé de mettre <ul> dans un premier temps, puis (pas ET) <li> en position relative (en rajoutant la propriété car elle n'existait pas pour l'un et l'autre), mais ça ne fonctionne pas.
Dans les deux cas, j'ai le même résultat : mon menu disparait. Il ne reste que le texte de mes boutons de menu, (texte qui se chevauche par ailleurs).
J'ai également essayé la méthode "flex" (que je ne connaissais pas), mais ça non plus ça ne fonctionne pas.
Après, peut-être que je ne déclare pas les propriétés au bon endroit.
De plus, comme je personnalise un thème (en l'occurrence, ici un module) Prestashop, je ne peux pas forcément faire comme je veux (comme ce n'est pas moi qui suis l'auteur du code).
Je ne dis pas, par là que je suis fermé à toute proposition, bien au contraire, mais peut-être que les solutions que vous proposez ne sont pas compatibles avec le reste du code CSS.
Le mieux, c'est que je vous donne une partie du code (avant modif) pour que vous puissiez voir où ça pèche :

.top_menu {
  clear: both;
  float: none;
  padding: 0 15px;
  text-align: left; }
  .top_menu a {
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s; }

.stickUpTop {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2; }

.stickUpHolder {
  padding: 0;
  max-width: 100%; }

.top_menu, .top_menu .stickUpHolder {
  position: relative; }
       .top_menu:before, .top_menu .stickUpHolder:before {
        position: absolute;
        content: '';
        width: 20000px;
        height: 100%;
        top: 0;
        left: -10000px;
  .top_menu > ul, .top_menu .stickUpHolder > ul {
    margin-bottom: 0;
    padding: 0; }
    .top_menu > ul > li, .top_menu .stickUpHolder > ul > li {
      float: left; }
      .top_menu > ul > li + li, .top_menu .stickUpHolder > ul > li + li {
        margin-left: 28px; }
      .top_menu > ul > li > a, .top_menu .stickUpHolder > ul > li > a {
        color: #000;
        display: block;
        font: 700 16px/22px "Ubuntu", sans-serif;
        padding: 8px 2px 8px;
        position: relative;
        text-transform: uppercase;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        max-width: 13rem;
        text-align: center; }
        .top_menu > ul > li > a:before, .top_menu .stickUpHolder > ul > li > a:before {
          background: #ff7f00;
          bottom: 0;
          content: '';
          display: block;
          height: 3px;
          left: 0;
          opacity: 1;
          margin: auto;
          position: absolute;
          right: 0;
          width: 0;
          -moz-transition: 0.4s;
          -o-transition: 0.4s;
          -webkit-transition: 0.4s;
          transition: 0.4s; }
         .top_menu > ul > li:hover > a, .top_menu > ul > li.sfHover > a, .top_menu > ul > li.sfHoverForce > a, .top_menu > ul > li > a:hover, .top_menu .stickUpHolder > ul > li:hover > a, .top_menu .stickUpHolder > ul > li.sfHover > a, .top_menu .stickUpHolder > ul > li.sfHoverForce > a, .top_menu .stickUpHolder > ul > li > a:hover {
        color: #fff; }
        .top_menu > ul > li:hover > a:before, .top_menu > ul > li.sfHover > a:before, .top_menu > ul > li.sfHoverForce > a:before, .top_menu > ul > li > a:hover:before, .top_menu .stickUpHolder > ul > li:hover > a:before, .top_menu .stickUpHolder > ul > li.sfHover > a:before, .top_menu .stickUpHolder > ul > li.sfHoverForce > a:before, .top_menu .stickUpHolder > ul > li > a:hover:before {
          width: 100%;
          -moz-transition: 0.4s;
          -o-transition: 0.4s;
          -webkit-transition: 0.4s;
          transition: 0.4s; }
          .top_menu > ul > li:hover > span.menu-mobile-grover:before, .top_menu .stickUpHolder > ul > li:hover > span.menu-mobile-grover:before {
        color: #fff; }
            .top_menu > ul > li > ul.is-simplemenu, .top_menu .stickUpHolder > ul > li > ul.is-simplemenu {
        right: auto;
        left: 0;
        top: 59px; }
  .top_menu ul.menu, .top_menu .stickUpHolder ul.menu {
    position: relative; }
  .top_menu li a, .top_menu .stickUpHolder li a {
    position: relative; }
  .top_menu li.simple, .top_menu li li, .top_menu .stickUpHolder li.simple, .top_menu .stickUpHolder li li {
    position: relative; }
  .top_menu li li a, .top_menu .stickUpHolder li li a {
    display: block;
    padding: 5px 0; }
  .top_menu li li.sfHover > a, .top_menu li li:hover > a, .top_menu li li.sfHoverForce > a, .top_menu .stickUpHolder li li.sfHover > a, .top_menu .stickUpHolder li li:hover > a, .top_menu .stickUpHolder li li.sfHoverForce > a {
    color: #df2b4e; }

Ce que je disais plus haut, c'est que j'ai ajouté la position relative ici :

.top_menu > ul > li, .top_menu .stickUpHolder > ul > li

ce qui donne donc :

.top_menu > ul > li, .top_menu .stickUpHolder > ul > li {
      float: left;
      position: relative; }

Puis, plus bas j'ai modifié la position de <a> et ajouté les propriétés top et transform, ce qui donne :

.top_menu > ul > li > a, .top_menu .stickUpHolder > ul > li > a {
        color: #000;
        display: block;
        font: 700 16px/22px "Ubuntu", sans-serif;
        padding: 8px 2px 8px;
        position: absolute;
        text-transform: uppercase;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        max-width: 13rem;
        text-align: center;
        top: 50%;
        transform: translateY(-50%); }

C'est bien ça ?
Je suis en train de me demander si j'agis sur le bon fichier CSS.
Modifié par spip93 (28 Jul 2016 - 09:13)

Bonjour,
Excusez-moi, je me permets de faire un petit up car je n'ai pas réussi à résoudre mon problème.
Bonne journée

Le code est vraiment fouilli à l'extrême. Cela ne donne pas envie (ni pour toi ni pour nous) de mettre les mains dedans.

Pourrais-tu en extraire le minimum vital (sans les préfixes, les font, etc.) et l'extraire dans un outil tel que Codepen ou jsfiddle ?

Ce sera beaucoup plus engageant pour tout le monde