Centrer un texte dans une zone

**zakuli** · 29/07/2017, 10h25

Bonjour
Je désire centrer un texte défini dans une zone. Au fil de mes lectures de tuto, je trouve que pour centrer un texte en CSS il faut utiliser les paramètres text-align(=center) et vertical-align: middle

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	<style type="text/css">
                #zone {
                        position: absolute;
                        top:100px;
                        left:100px;
                        height:100px;
                        width:100px;
                        background-color:#FF0000;
                        text-align:center;
                        vertical-align:middle;
                }
        </style>
	<div id="zone">Texte</div>

Pour le centrage horizontal, c'est OK

Mais pour le centrage vertical : ça ne marche pas.

Aussi comment peut on centrer verticalement un texte dans une zone telle que définie ci-dessus ?

Merci

Zakuli

**danielhagnoul** · 29/07/2017, 12h02

Exemple :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
                
                #zone {
                        position: relative;
                        top: 20px;
                        left: 20px;
                        height: 200px;
                        width: 200px;
                        background-color: #FF0000;
                }
                #zone > p {
                        width: 200px;
                        height: 200px;
                        line-height: 200px;
                        text-align: center;
                }
                #zone > p > span { 
                        width: 200px; /* largeur de la zone de texte */
                        padding: 10px; /* aération interne de la zone de texte */
                        vertical-align: middle;
                        display: inline-block;
                        line-height: 1.2; /* on rétablit le line-height */
                        text-align: left; /* ... et l'alignement du texte */
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        
                                                
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<div id="zone">
			<p>
				<span>Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati.</span>
			</p>
		</div>
 
	</main>
</body>
</html>

**zakuli** · 29/07/2017, 19h35

Bonsoir Daniel,

Besoin de quelques explications :
1-Pourquoi ça ne marche pas si j'utilise le code que tu m'as donné avec une position absolute :

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
16
17
18
19
20
21
22
23
 
                #connexion {
                        position: absolute;
                        top: 10px;
                        left: 1800px;
                        height: 200px;
                        width: 300px;
                        background-color: #FF0000;
                }
                #connexion > p {
                        width: 300px;
                        height: 200px;
                        line-height: 200px;
                        text-align: center;
                }
                #connexion > p > span { 
                        width: 300px; /* largeur de la zone de texte */
                        padding: 10px; /* aération interne de la zone de texte */
                        vertical-align: middle;
                        display: inline-block;
                        line-height: 1.2; /* on rétablit le line-height */
                        text-align: left; /* ... et l'alignement du texte */
                }

dans ce cas le texte n'est pas centré dans la zone

2-A quoi sert le "line-height" dans "#zone > p" ?

3-A quoi sert le "display: inline-block;" ?

4-Pourquoi répète-t-on width dans "#zone > p" et "#zone > p > span" ?

5-Pourquoi répète-t-on height dans "#zone > p" ?

Merci

Zakuli

**danielhagnoul** · 29/07/2017, 21h53

Envoyé par https://developer.mozilla.org/fr/docs/Web/CSS/vertical-align

La propriété vertical-align définit l'alignement vertical d'une boîte en ligne (inline) ou d'une cellule de tableau.

On doit utiliser une "bidouille" pour contourner la restriction ci-dessus, car cette propriété ne peut pas s'appliquer à un élément block (div, p).

On joue sur la hauteur de ligne (line-height: 200px;) d'un tag P, le tag P devant occuper tout l'espace de son conteneur (width: 200px; height: 200px;).

C'est le span inclus dans le tag P qui reçoit les propriétés vertical-align: middle; et display: inline-block;.

Code CSS :

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

1
2
line-height: 1.2; /* on rétablit le line-height */
text-align: left; /* ... et l'alignement du texte */

Les propriétés ci-dessus permettent d'écrire un paragraphe centré dans la division au lieu d'un mot centré, le texte du paragraphe commençant à gauche comme il se doit.

Une "bidouille" se prend telle quelle ou pas du tout, à vous de choisir.

**zakuli** · 29/07/2017, 22h49

OK Merci Daniel.

J'ai compris la raison firefox qui oblige que le tag P occupe toute la zone, mais il me reste le fait que le script ne fonctionne pas avec un "position:absolute", est ce normal ?

**JefReb** · 30/07/2017, 09h03

Bonjour Zakuli,
Il n'y a pas besoin de javascript, il suffit d'utiliser flex.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#zone {
	position: absolute;
	top: 100px;
	left: 100px;
	height: 100px;
	width: 100px;
	background-color: #FF0000;
	display: flex;
        align-items: center;
	justify-content: center;
}

Code html :

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

<div id="zone">Texte</div>

et le texte est centré verticalement et horizontalement.

**zakuli** · 30/07/2017, 12h08

Wouah, super JefReb,

Beaucoup plus simple que ce que j'avais trouvé !

Un grand merci

Zakuli

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
16
17
18
 
<style type="text/css">
	 #zone {
		position:absolute;
		top:100px;
		left:100px;
		height:100px;
		width:100px;
		background-color:#FF0000;
	}
       #zone_span {
		margin:auto;
		display: block;
		line-height:100px;
		text-align: center;
	}
</style>
<div id="cnx"><span id="zone_span">Connexion</span></div>

**NoSmoking** · 30/07/2017, 12h17

Bonjour,

Beaucoup plus simple que ce que j'avais trouvé !

pas des plus convaincu

Code :

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

1
2
3
4
5
#zone {
  line-height: 6em;
  background-color:#ABC;
  text-align: center;
}

Code html :

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

<div id="zone">Connexion</div>

c'est en gros à ce quoi on arrive lorsque l'on simplifie ton code.

Centrer un texte dans une zone

Centrer un élément en CSS

Discussions similaires

Partager

Partager