Comment aligner verticalement l'image et du texte dans un DIV à l'aide de CSS?

J'ai une image et du texte dans une div et j'aimerais mettre l'image et le texte dans le centre vertical de la div à l'aide de CSS. Le problème est que je ne sais pas combien de lignes de texte je vais avoir, mais le texte et l'image doit TOUJOURS être dans le milieu. Par exemple, quand il y a seulement une ligne de texte de la div doit ressembler à ceci:

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

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

####################################
#                                  #
#              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      #
#                                  #
####################################

Je suis en difficulté pour obtenir cet effet, est-il possible sans l'utilisation de javascript pour faire cela?

Obs. Le div parent de la div, je fais allusion à la position:relative donc, il y a un autre problème.

InformationsquelleAutor Cainã | 2012-11-16

40

Donner à la fois l'image et le texte vertical-align: middle - le texte doit être contenue dans un élément qui est également display: inline. Afin de 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 fonctionner. Voici un jsfiddle à démontrer (édité violon pour montrer que tout est aligné verticalement à l'intérieur d'un conteneur.)

EDIT: pour obtenir le comportement que vous voulez, je vous recommande l'utilisation de nouvelles propriétés d'affichage - table pour le conteneur et table-cell pour le contenu des éléments. Violon lien a été mis à jour avec les changements.

EDIT: la seule façon que je pouvais penser de l'obtenir pour fonctionner est de les envelopper l'image dans un autre inline conteneur, dans ce cas, une durée. J'ai mis à jour le violon à démontrer.
- Oui, la plage est préférable de sorte que vous n'avez pas à ajouter toutes les propriétés d'affichage pour le conteneur de texte.
- J'ai essayé dans mon code et en coulisse, il fonctionne avec une seule ligne de texte, mais pas avec de texte multi-ligne.
- Ah, ok, je vais mettre à jour le violon, avec quelques modifications pour réaliser ce que je pense que vous voulez.
- C'est presque le même effet, lorsque le texte est plus élevé que l'image l'image n'est pas dans le texte.
- Hmm, je vais devoir bricoler un peu plus à gérer ce cas.
- mis à jour le violon à nouveau, mais j'ai dû modifier le balisage pour le faire fonctionner. jsfiddle.net/kq9G8/8
- J'étais à la recherche tous les cours sur internet pour cette question pendant 2 ans. Merci @kinakuta
InformationsquelleAutor kinakuta

Vous pouvez essayer cette, 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;
}

HTML:

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

Apko bhi shukria est, par mein saab nehi hoon bhai, sirf Heera kafi hai.

InformationsquelleAutor The Alpha

Vous devez vous connecter pour publier un commentaire.