web-dev-qa-db-fra.com

Comment aligner verticalement l'image et le texte dans un DIV en utilisant CSS?

J'ai une image et du texte à l'intérieur d'un div et j'aimerais mettre l'image et le texte au centre vertical du div en utilisant CSS. Le problème est que je ne sais pas combien de lignes de texte j'aurai mais le texte et l'image doivent TOUJOURS être au milieu. Par exemple, lorsqu'il n'y a qu'une seule ligne de texte, la div doit ressembler à ceci:

####################################
#  _______                         #
# |       |                        #
# |       |                        #
# | IMAGE |    text text text      #
# |       |                        #
# |_______|                        #
#                                  #
####################################

Si finalement j'ai plus de lignes ou que la hauteur du texte est plus grande que la hauteur de l'image, l'image doit être alignée, comme ceci:

####################################
#                                  #
#              text text text      #
#  _______     text text text      #
# |       |    text text text      #
# |       |    text text text      #
# | IMAGE |    text text text      #
# |       |    text text text      #
# |_______|    text text text      #
#              text text text      #
#              text text text      #
#                                  #
####################################

J'ai des problèmes pour obtenir cet effet, est-il possible sans utiliser javascript de le faire?

Obs. Le parent div du div dont je parle a une position: relative donc il y a un autre problème.

htmlcssimage
30
Cainã

Donnez à l'image et au texte un alignement vertical: milieu - le texte doit être contenu dans un élément qui est également affiché: en ligne. Donc balisage comme ceci:

<div>
  <span><img src="blah.jpg" /></span>
  <span>text text text</span>
</div>

div {
  display: table;
}

img {
  vertical-align: middle;
  display: table-cell;
}
span {
  vertical-align: middle;
  display: table-cell;
}

devrait marcher. Voici un jsfiddle pour démontrer (un violon modifié pour montrer que tout est également aligné verticalement dans un conteneur.)

EDIT: pour obtenir le comportement souhaité, je recommande d'utiliser des propriétés d'affichage supplémentaires - tableau pour le conteneur et cellule de tableau pour les éléments contenus. Fiddle a été mis à jour avec les modifications.

EDIT: la seule façon dont je pouvais penser pour le faire fonctionner était d'envelopper l'image dans un autre conteneur en ligne, dans ce cas une plage. J'ai mis à jour le violon pour le démontrer.

39
kinakuta

Vous pouvez essayer ceci, exemple ici .

CSS:

div.parent{ 
    border:solid black 1px;
    display:table;
    padding:5px; 
    width:100%;
    margin:5px 0; /* you can change/remove margin */
}
div.text{ 
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
}
div.parent .img{
    vertical-align:middle;
    display:table-cell;
    padding-right:5px;
    width:50px; /* you can change width */
}
div.img img{ 
    width:100%;
    height:50px; /* you can change height */
    vertical-align:middle;
}

La

HTML:

<div class="parent">
    <div class="img"><img src="http://example.com.img1.png" /></div>
    <div class="text">Some Text Some.</div>
</div>
3
The Alpha