Centrer un texte verticalement dans une image

**Jynno22** · 11/12/2012, 19h48

Bonsoir ,

Je souhaite centrer verticalement un texte qui se trouve à l'intérieur d'une image .
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="compte_a_rebours"style="width: 686px; height:46px; background: url('promoflash.png');">

Et le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#compte_a_rebours
p
{
  font-size: 1.2em;
  text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align:middle;
}

Le texte est centrer horizontalement mais par contre verticalement il est trop haut et je n'arrive pas à le rabaisser .

Merci d'avance pour votre aide.

**rodolphebrd** · 11/12/2012, 20h14

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
p {
        margin: 0px;
        padding: 0px;
}
#compte_a_rebours p
{
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        width:686px;
        height: 46px;
        line-height:46px;
        font: 1.2em/46px Arial, Helvetica, sans-serif;
}
</style>
 
</head>
 
<body>
<div id="compte_a_rebours"style="width: 686px; height:46px; background-color:gray;">
  <p>m ipsum</p>
 
</div>
</body>
</html>