Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrer un texte dans une zone


Sujet :

Centrer un élément en CSS

  1. #1
    Membre régulier
    Centrer un texte dans une zone
    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

  2. #2
    Rédacteur



    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>

  3. #3
    Membre régulier
    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

  4. #4
    Rédacteur

    Citation 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.

  5. #5
    Membre régulier
    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 ?

  6. #6
    Membre éclairé
    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.

  7. #7
    Membre régulier
    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>

  8. #8
    Modérateur

    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.

###raw>template_hook.ano_emploi###