Comment vertical aligner les éléments à l'intérieur d'un div

Je suis un HTML/CSS débutant et l'alignement vertical des éléments à côté div, me rend fou. En gros, j'ai un div qui contiennent un mélange de texte et d'images, et tout ce que je voulais faire est d'aligner verticalement les éléments dans le milieu de th ediv.

Selon ce post:

Des éléments Inline (et seulement des éléments inline) peuvent être alignés verticalement
dans leur contexte via vertical-align: middle. Cependant, le “contexte”
n'est-ce pas l'ensemble du conteneur parent de la hauteur, c'est la hauteur du texte
la ligne qu'ils sont en.

Donc, j'ai créer un SPAN d'événement et de définir la diplay: inline mais rien ne fonctionne:

<div id="main_section" class="main_align" >
    <span class="inline">
        <span class="inline"><img src="http://placehold.it/50x50" /></span>
        &nbsp;
        <span class="small inline">A Very Small Text</span>
        &nbsp;
        <span class="medium inline">Medium String</span>
    </span>
</div>

Ici est la jsfiddle.

Tous les pointeurs seront grandement appréciés.

Note: je suis heureux si cela fonctionne dans Chrome et Firefox. Pas besoin d'adresse de IE questions.

Les réponses de @lazyprogrammer et @j08691 sont parfaitement bien, et ils ont moins besoin d'instructions, mais si vous aussi vous souhaitez aligner le texte (pas par leur base), puis vérifier ma réponse, qui nécessite l'utilisation de inline-block

OriginalL'auteur marcoseu | 2013-05-10

  1. 6

    MODIFIER 2018: j'ai tendance à utiliser Flexbox beaucoup de nos jours pour le centrage dans n'importe quelle direction. inline-block est toujours bien, mais Flexbox est tellement puissant 🙂

    Si vous aussi vous souhaitez aligner les textes de différentes tailles verticalement (autre que par leur niveau de référence), que le violon est une solution possible, à l'aide de inline-block: http://jsfiddle.net/vGKjj/13/

    HTML:

    <div id="main_section" class="main_align" >
    <span>
        <span class="vam"><img src="http://placehold.it/50x50" /></span>
        &nbsp;
        <span class="small vam">A Very Small Text</span>
        &nbsp;
        <span class="medium vam">Medium String</span>
    </span>
</div>

    CSS:

    .vam {
    vertical-align: middle;
}
span.vam {
    display: inline-block;
}
.vam img {
    vertical-align: top; /* removes a white gap below image */
}
    +1 nice et solution complète

    OriginalL'auteur FelipeAls

  2. 1

    Votre problème peut être résolu en ajoutant le code suivant

    .inline img{
   vertical-align:middle;
 }

    Juste une autre remarque

    Aussi un truc qui marche bien, si vous avez une hauteur fixe, faire de la hauteur de la ligne égale à elle.
    Par exemple:-

    .yourDiv{
    height:50px;
    line-height:50px;
 }

    jsfiddle

    Merci. Aucune idée si il ya quelque chose que je peux faire pour obtenir le texte à aligner dans le milieu?
    voir modifier! le ci-dessus ne fonctionne que si vous avez une seule ligne

    OriginalL'auteur lazyprogrammer