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
    Homme Profil pro
    Retraité Ing Electronique
    Inscrit en
    mars 2004
    Messages
    334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Retraité Ing Electronique
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : mars 2004
    Messages : 334
    Points : 117
    Points
    117
    Par défaut 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

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 221
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 221
    Points : 22 445
    Points
    22 445
    Billets dans le blog
    70
    Par défaut


    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
    Homme Profil pro
    Retraité Ing Electronique
    Inscrit en
    mars 2004
    Messages
    334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Retraité Ing Electronique
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : mars 2004
    Messages : 334
    Points : 117
    Points
    117
    Par défaut
    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

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 221
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 221
    Points : 22 445
    Points
    22 445
    Billets dans le blog
    70
    Par défaut
    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
    Homme Profil pro
    Retraité Ing Electronique
    Inscrit en
    mars 2004
    Messages
    334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Retraité Ing Electronique
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : mars 2004
    Messages : 334
    Points : 117
    Points
    117
    Par défaut
    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é
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 519
    Points : 705
    Points
    705
    Par défaut
    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
    Homme Profil pro
    Retraité Ing Electronique
    Inscrit en
    mars 2004
    Messages
    334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Retraité Ing Electronique
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : mars 2004
    Messages : 334
    Points : 117
    Points
    117
    Par défaut
    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

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 874
    Points : 33 837
    Points
    33 837
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 11
    Dernier message: 07/10/2014, 11h33
  2. Centrer un texte dans une page
    Par Samanta dans le forum Mise en forme
    Réponses: 5
    Dernier message: 20/09/2010, 23h30
  3. centrer le texte dans une zone de saisie
    Par tchao9 dans le forum GTK+ avec C & C++
    Réponses: 1
    Dernier message: 21/05/2010, 00h34
  4. incrementation d'un format texte dans une zone de texte
    Par frederic.go dans le forum Access
    Réponses: 6
    Dernier message: 18/10/2005, 15h47
  5. Centrer le texte dans une TStringGrid
    Par Rodrigue dans le forum C++Builder
    Réponses: 2
    Dernier message: 10/06/2004, 12h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo