centre du texte sur l'image

Question

Ceci est probablement très facile à faire, mais pour une raison quelconque, rien ne fonctionne à partir de moi. Disons que j'ai une image et un texte comme ceci:

<div id="my_div"> 
    <img src="my_img.png" alt="Test" /> 
    <p>Some Text</p> 
</div> 

Comment centre-je le texte Some Text sur mon image horizontalement et verticalement (je veux que le texte apparaisse au milieu de l'image)

Merci

Answer 1

vous pouvez utiliser display: table/table-cell:

CSS:

.example { 
    display: table; 
    width: 100px; /* Width of the image */ 
    height: 100px; /* Height of the image */ 
} 

.example > P { 
    background: url(my_img.png) no-repeat; 
    display: table-cell; 
    text-align: center; /* Center text horizontally. */ 
    vertical-align: middle; /* Center text vertically. */ 
} 

HTML:

<div class="example"><p> 
    Some text 
</p></div> 

Si vous avez besoin d'avoir votre image comme élément IMG, vous pouvez utiliser un code similaire avec l'ajout de l'élément IMG avant et margin-top négatif pour l'élément avec display:table pour positionner le texte image ci-dessus.

Answer 2

Un moyen facile de faire cela qui fonctionne dans pratiquement tous les navigateurs est de faire de l'image l'image d'arrière-plan de la div, puis de définir la propriété line-height du paragraphe. Notez que cela ne fonctionne vraiment que si le texte est sur une ligne.

jsFiddle example

CSS

#my_div p { 
    line-height:200px; 
    text-align:center; 
    color:white; 
} 

#my_div { 
    background-image: url(http://www.placekitten.com/400/200); 
    width:400px; 
    height:200px; 
} 

HTML

<div id="my_div"> 
    <p>Some Text</p> 
</div>​