web-dev-qa-db-fra.com

CSS: Centrer le texte à la fois horizontal et vertical?

Je crée un nouveau site Web et j'ai besoin de savoir quelque chose (montrera avec exemple).

Disons que j'ai fait ceci:

html;

<div id="center-in-bar">
   <ul>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
</div>

et css:

#center-in-bar {
   list-style:none;
   display:inline-block;
   /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}

Que dois-je faire pour que tous les éléments li soient centrés horizontalement et verticalement? Dans l'élément center-in-bar?

Toute aide serait appréciée :))

csshtml5
18
Stian Olsen

Essayez cet extrait de code CSS:

#center-in-bar ul {
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}
#center-in-bar li {
    ...
    display:inline; /* you might want to use this instead of "inline-block" */
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}
11
user1093284

D'une manière ou d'une autre, il n'y a toujours pas de norme pour ce faire, mais d'après mon expérience, la solution suivante est probablement la solution la plus fiable:

<style type="text/css"> 
    #container {     
        display:table;     
        border-collapse:collapse;   
        height:200px;   
        width:100%; 
        border:1px solid #000; 
    }          
    #layout {     
        display:table-row;    
    }            
    #content {     
        display:table-cell;   
        text-align:center;  
        vertical-align:middle;     
    }            
</style>      
<div id="container">     
    <div id="layout">     
        <div id="content">  
            Hello world!  
        </div>      
    </div>    
</div>

Voici une autre technique qui utilise un positionnement relatif et absolu pour simuler une position centrale-médiane. Cette technique n'est pas exacte, mais elle devrait être compatible avec tous les navigateurs (même les plus anciens):

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%; /* adjust this as needed */     
        left:0; 
        width:100%; 
        text-align:center;
    } 
    #container {
        position:relative;
        height:200px;
        border:1px solid #000;
    }
</style>         
<div id="container"> 
    <div id="vertical"> 
        Hello world! 
    </div>               
</div>

Note importante:

Lorsque cette question est posée, quelqu'un semble toujours suggérer la solution line-height, mais je vous implorerais de vous écarter de cette suggestion. Cela a l'air bien quand vous montrez quelque chose de simple, comme "Hello World", mais line-height se déchire horriblement quand le texte se termine.

8
James Johnson

Vous devriez donner la même valeur à line-height et height. 

#center-in-bar li
{
height: 30px
line-height: 30px;
text-align: center;}

regardez aussi ceci: Texte aligner verticalement dans li

0
efirat

COMMENT CENTRER HORIZONTALEMENT UN ARTICLE BLOQUANT (COMME UN DIV) OR ARTICLE EN LIGNE (SIMPLE TEXTE)

Supposons que vous vouliez centrer un document sur une page de navigateur, de sorte que l'élément soit toujours centré, quelle que soit sa taille, l'élément est toujours centré:

    body {
     margin:50px 0px; padding:0px;
     text-align:center;
    }

    #Content {
     width:500px;
     margin:0px auto;
     text-align:left;
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;
    }

écrivez ce code HTML pour centrer horizontalement quelque chose entre vos balises body:

<body>
<div id="Content">I am a centered DIV</div>
</body>

Cela centrera horizontalement les éléments de niveau bloc. Pour centrer du texte, des espaces ou d'autres éléments en ligne, il vous suffit d'ajouter:

    #Content {
     width:500px;
     margin:0px auto;
     text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;

    }

COMMENT CENTRER VERTICALEMENT UN OBJET DE BLOC (SIMILAIRE) OR DETAIL (comme le texte)

Remarque: n'utilisez pas line-height pour centrer les éléments verticalement, cela ne fonctionnerait que pour une ligne de texte et rien de plus. 

En ce qui concerne le centrage vertical des éléments, il existe 3 à 5 méthodes que vous pouvez utiliser en fonction de quoi vous essayez de centrer.

Ce site décrit facilement chaque méthode pour vous: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Bonne chance!

0
Downpour046