Centrer une texte verticalement dans une div

**pc75** · 26/02/2014, 14h07

Bonjour,

Je dois afficher un texte dans la barre de statut du navigateur.
Comme cette zone a disparu sous FF, j'ai bidoullé ce code :

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
<html>
<head>
<title>
Mon titre
</title>
 
<link rel="stylesheet" type="text/css" href="Barre.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="BarreIE.css" />
<![endif]-->
 
</head>
<body style="background-color:#ECF4FF" onload="this.focus()" onMouseOver="window.status='Le texte à afficher dans la barre de statut'; return true;">
<div class="class_barre">
	Le texte à afficher dans la barre de statut
</div>
.....

Barre.css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.class_barre{
    position: fixed;
    bottom: 0;
    margin-left: -7;
    width: 100%;
    background: #ece9d8;
    border-top: 2px solid #AAAAAA;
    height: 20px;
    color: Black;
    font-family: arial;
    font-style: normal;
    font-size: 11px;
    vertical-align: middle;
    display: inline;
}

BarreIE.css :

Code :

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

1
2
3
.class_barre{
	display: none;
}

La barre s'affiche bien uniquement sous FF, mais le texte n'est pas centré verticalement malgré le vertical-align:middle.
Il me manque quoi pour que le texte soit centré ?

Merci.

**Muchos** · 26/02/2014, 14h38

VERTICAL-ALIGN s'applique à un contexte inline (par exemple une image dans un paragraphe) ou un contexte tabulaire (typiquement une cellule).

Dans votre cas, vous pourriez mettre une hauteur de ligne équivalente à la hauteur de la boîte. Ex :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Centrage vertical</title>
<style>
.class_bar {
 height: 50px;
 line-height: 50px;
 background: red;
}
</style>
</head>
<body>
 <div class="class_bar">Le texte à afficher dans la barre de statut</div>
</body>
</html>