Verticalement centre d'un lien à l'intérieur d'un div

J'ai une liste non ordonnée...

<ul class="hide">
  <li class="home">
    <div class="link">
      <a href="/">Home</a>
    </div>
  </li>
  <li class="about">
    <div class="link">
      <a href="/about">About Our Community</a>
    </div>
  </li>
  <li class="contact">
    <div class="link">
      <a href="/contact">Contact Us</a>
    </div>
  </li>
</ul>

Mon CSS ressemble à ça....

#sitenav ul li .link a {
  color: #555;
  text-decoration: none;
  float: left;
  padding-right: 3px;
  margin-top: auto;
  margin-bottom: auto;
}

Mais les marges ne centre pas le lien verticalement

Des idées?

Est le lien texte toujours dans une ligne, ou faut-il l'air bon, si un saut de ligne se produit?
Si vos liens seront une seule ligne - jsfiddle.net/SE7aB
Pourquoi avez-vous un div? Vous pourriez le style de la li... veuillez Également fournir un violon avec le code qui est à l'origine du lien "non alignés"
Il est juste en justifiant vers le haut, la div est là au cas où je ajouter de nouvelles données à l'élément de la liste, il doit regarder bien si les sauts de ligne se produire. Zoltan, comment cette définis de manière statique 50px effet le site quand il est sur des appareils plus petits? Actuellement, c'est sensible et je suis en train d'essayer d'éviter réel le nombre de pixels (sauf si c'est 1 ou 2 pxs). J'ai essayé line-height: 100%, mais pas de chance
N'a aucune réponse ci-dessous à résoudre votre problème?

OriginalL'auteur Jackie | 2012-06-13

  1. 12

    Cette solution pourrait travailler pour vous: http://jsfiddle.net/WLQAS/8/

    margin-top: auto; et margin-bottom: auto; ne travaillent pas pour aligner verticalement les objets.

    Mise à jour de CSS

    li {
  color: #555;
  text-decoration: none;
  float: left;
  padding-right: 3px;    
}

.link {
    vertical-align: middle;
    display: table-cell;
    height: 50px;
}
    Je dois être une "ligne" donc si je change par l'ajout d'une largeur:20%, il tombe à nouveau... jsfiddle.net/WLQAS/2
    Je pense que cette réponse permet de résoudre votre problème. Vous pouvez régler Luis code de sorte qu'il est sur une seule ligne: jsfiddle.net/WLQAS/7. Tant que le récipient est assez large pour contenir le contenu, il doit être sur une seule ligne.
    Ici, le problème serait pas universelle largeur, aussi je ne suis pas sûr que ce serait une bonne idée de limiter le texte à une seule ligne si c'est sur un petit écran.
    Thx khaled_webdev pour les corrections, ajout de la suggestion de @Broyeur de fait, j'ai fait la dernière édition sur cette réponse. Est-ce à résoudre la question de Jackie ?
    Possible pour faire passer le texte dans un sens, il ne s'adapte parfaitement à la taille du conteneur?

    OriginalL'auteur Luis

  2. 4

    Voici une croix navigateur compatible solution pour l'alignement vertical d'une a-élément avec un inconnu de la hauteur au sein d'une div:

    Œuvres avec des textes de liens avec et sans sauts de lignes.

    CSS

    * { margin: 0; padding: 0 }

ul {}
ul li {
    display: table;
    height: 75px;
    #position: relative; /* ie hack */
    overflow: hidden;
    border: 1px solid red;
}

ul li div {
    #position: absolute; /* ie hack */
    #top: 50%; /* ie hack */
    display: table-cell;
    vertical-align: middle;
}

ul li div a {
    #position: relative; /* ie hack */
    #top: -50%; /* ie hack */
    border: 1px solid green
}

    Il n'est pas recommandé d'utiliser des hacks CSS ici, l'utilisation les commentaires conditionnels à la place.

    Démonstration en direct: http://jsfiddle.net/ahdzg/1/

    Plus d'infos sur ce truc: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

    Espère que cette aide. Sinon, n'hésitez pas à demander.

    J'ai converti le li éléments div et elle fonctionne encore à la grande.

    OriginalL'auteur doptrois

  3. 0
    .parent_div{display:table;}.child_div{display:table-cell;vertical-align:middle;}

    Puis mettre votre lien à l'intérieur de l'enfant div.

    OriginalL'auteur Daniel Msanii