Comment aligner le texte et l'image dans une boîte CSS?

Question

Je voudrais aligner verticalement du texte et une image dans une boîte CSS.

J'ai essayé plusieurs méthodes, voici le code pour le dernier que j'ai essayé appelé « display: table-cell méthode »

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;"> 
2:38<img src="images/stopwatch-button-play.png"> 
</div> 

Voici une capture d'écran du résultat dans la dernière version de Firefox: http://screencast.com/t/Yzg2MzAzNW

L'image est centrée correctement, le texte est centré presque correctement. Il se trouve à la base de l'image. Pourquoi?

Answer 1

modifier les paramètres suivants

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;"> 
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png"> 
</div> 

Answer 2

L'alignement vertical est complètement méconnu. Avez-vous lu this?

quant à savoir pourquoi les sites de texte à la ligne de base de l'image, c'est parce que l'image et le texte sont tous deux dans le flux de la div. ils ne se chevaucheront pas. pour avoir le texte centré aussi (impliquant qu'il se trouve sur l'image), vous devrez mettre le texte dans un div ou un span et ajuster son positionnement (le régler sur relatif et expérimenter avec gauche et haut).

À votre écoute

Answer 3

Vous pouvez utiliser la propriété background-position.

il ressemble à ceci.

arrière-plan: url (chemin/vers/image.quoique) top; // l'aligne en haut.

vous pouvez même faire quelque chose comme top left ou top right etc.

w3schools a tout ce que vous devez savoir sur les milieux.

Answer 4

Si votre texte est une seule ligne haute, vous pouvez définir-hauteur de la ligne à la hauteur de votre image. Il va centrer le texte verticalement. Ensuite, la position: absolute sur votre image l'empêchera de perturber le positionnement du texte dans la div:

<div style="border-color:blue; height:200px; "> 
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="images/stopwatch-button-play.png"></div> 
</div>