Comment aligner une image et du texte verticalement dans le milieu?

J'ai un DIV en haut et un peu d'ancres. La première est de style avec un logo et le reste du texte. Les styles que j'ai mis sont comme suit.

div.nav-top {
  height: 120px;
  vertical-align: middle;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  display: inline-block;
}

a.nav-link {
  vertical-align: middle;
}

Toutefois, ces éléments ne sont pas centrées dans le div. L'alignement semble suivre l'image, ce qui est en haut. Le texte est dans le milieu par rapport à l'image. Ce n'est pas une mauvaise idée mais j'ai besoin de l'ensemble du système img-un-un-un-un pour être centré verticalement. Pour le moment, je pavé, mais dès que la hauteur de la DIV extérieure change, tout se casse.

Ce que je fais mal?

(J'ai trouvé ce post mais ici, ils s'appliquent tables et tels. Ne semble pas comme la solution la plus appropriée. Peut-être que je me trompe?

Comment aligner une image et du texte verticalement dans le milieu?

  • avez-vous essayé la solution dans le post que vous avez lié à ou le trouver? fait-il? si elle a fait un travail, pourquoi n'est-il pas approprié?
  • Désolé d'être floues. Il semblait être un très vaste et complexe, approche de fonctions de base. Je ne dis pas que c'est faux. Juste eu le sentiment que le centrage du texte dans un div verticalement devrait exiger quelque chose de très, très basique. J'ai essayer de faire la distinction entre "faire" et "faire bien".
InformationsquelleAutor | 2016-01-02
  1. 2

    Vous pouvez vous référer à ce blog, où le propriétaire décrit le centrage des questions. Il a commencé à 2001 mais être conscient que la dernière mise à jour a été faite l'été dernier, et j'admire sa persévérance. Il présente des exemples sur la façon de centre de dans les différentes versions de CSS.

    Dans votre cas, je suggère que vous utilisez display: flex comme si. Notez que l'ensemble de centrage de la magie est fait à partir du contenant de contrôle et imposées sur le sous-jacent enfants. Il y a en fait pas besoin de style nav-lien à tous (voir la remarque ci-dessous l'exemple, bien que).

    div.nav-top {
  height: 120px;
  background-color: purple;
  padding: 10px;
  display: flex;
  align-items: center;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  background-position: center center;
  width: 200px;
  height: 100%;
}

a.nav-link { }

    Qui est une chose nouvelle dans le style, et a récemment mis en œuvre. L'inconvénient de cette est que les navigateurs plus anciens pourraient avoir des problèmes de le rendre. Mais l'avantage est qu'il est beaucoup plus intuitive pour les concepteurs (et récupérer un décent version d'un navigateur n'est pas loin d'atteindre, à moins d'gérés de manière centralisée par l'entreprise).

    Vous pouvez utiliser marge pour les commandes d'ancrage, comme ils vont être écrasés toghether. Aussi, les tailles et les polices aurez besoin de réglage. Si vous le faites, vous allez probablement finir par avoir besoin le style que j'ai proposé n'était pas nécessaire, mais c'est des détails seulement vous en êtes conscient.

    a.nav-link {
  margin: 10px;
  font-size: 20px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}
    InformationsquelleAutor Konrad Viltersten
  2. 8

    À L'Aide De Flexbox

    CSS:

    nav, .menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
}

li {
  padding: 0 5px;
}

    HTML:

    <nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

    À l'aide de CSS Table

    CSS:

    nav, .menu {
  display: table;
}

.logo, .menu {
  display: table-cell;
  vertical-align: middle;
}

li {
  padding: 0 15px;
  display: table-cell;
  vertical-align: middle;
}

    HTML:

    <nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

    • Vraiment très agréable. Maintenant, vous m'avez donné un mal de tête parce que je ne peux pas décider lequel utiliser. Est flex plus moderne? Je sais que c'est dur à dire, mais... qui n'est plus recommandé en général? LOL Aussi, un énorme +1 pour le snippage.
    • Je voudrais utiliser flex et oui je ses plus moderne, mais vous décidez caniuse.com/#search=flexbox, caniuse.com/#search=display%3A%20table
    InformationsquelleAutor Nenad Vracar
  3. 1

    Il est toujours une bonne pratique pour le contrôle de la hauteur avec des rembourrages au lieu d'une hauteur fixe et des marges au centre. Donc, en gardant cela à l'esprit:

    • Envelopper la div avec le logo et le div avec l'anchortags que les enfants d'un conteneur div.

    • donner la pourpre de la boîte (ou ce qu'il représente le correspondant rembourrage en haut et en bas vers le centre div parent que vous avez créé à l'intérieur.

      .purple{
    background:purple;
    width:400px;
    display:inline-block;
    padding: 20px 15px;
    height:auto;
}

    MODIFIER

    ou, si vous DEVEZ avoir une hauteur fixe sur le parent; 

        .purple{
        background:purple;
        width:400px;
        display:inline-block;
        height:60px;
        padding: 0px 15px;
    }

    Voir ce démo

    • Le violet div en haut doit avoir une hauteur donnée. Il va y avoir de la barre de menu. Ou ai-je mal compris votre suggestion? J'ai testé la démo et que je comprends, il s'adapte en violet de la hauteur du contenu. Je veux être dans l'autre sens. Je veux que l'on fixe.
    • Vous pouvez toujours gérer la hauteur avec un rembourrage, même si c'est la barre de menu. Cependant, si vous souhaitez une hauteur fixe, alors vous avez besoin de marges. Je vais ajouter que l'approche de la démo dans quelques minutes
    InformationsquelleAutor LOTUSMS
  4. 1

    Que vous pouvez placer vos éléments dans un div et l'utilisation margin: 0, auto; pour les éléments et le récipient intérieur ainsi.

    • Est-ce seulement moi ou est l'approche qui a un peu vieilli (encore à travailler, bien sûr, et certainement en arrière, mais encore)? Diriez-vous que la solution que je propose dans mon post est trop étroit?
    • Je crois qu'il n'est pas important de savoir si une solution est ancien ou nouveau. C'est d'autant plus important de voir comment elle est efficace, quel est le problème de l'espace qu'il couvre, quels sont les effets secondaires et, dans cette perspective, il est possible de comparer les solutions. Donc, j'ai jusqu'-voté votre solution, mais je voudrais encore aller pour le bien-ol " sans y réfléchir à deux fois si je ne vois pourquoi est-il inférieur à une approche plus récente. La compatibilité ascendante, l'utilisation de la mémoire, la complexité de l'algorithme sous la huée, etc., etc.
    • Très judicieuse remarque, en effet. Je ne voulais pas dire en aucune façon impliquer que moderne est le meilleur (parfois, il est, bien sûr, mais le plus souvent ce que nous attendons, il n'est pas). Le classique approche a ses forces et, même si c'est pas appliquée, il est toujours connu pour le décideur. C'est pourquoi j'aime le blog, j'ai lié.
    InformationsquelleAutor Lajos Arpad