Comment centrer le contenu dans cette div?

Question

Voici un lien: http://jsfiddle.net/zCXMv/18/

Je n'arrive pas à comprendre comment cela fonctionne. S'il vous plaît aider.

HTML:

<div id="button" > 
    <a class="button1 active" rel="1"></a> 
    <a class="button2" rel="2"></a> 
    <a class="button3" rel="3"></a> 
    <a class="button4" rel="4"></a> 
</div> 

CSS:

.button1, 
.button2, 
.button3, 
.button4 { 
    background:#999; 
    padding:6px; 
    display:block; 
    float:left; 
    margin-right:5px; 
} 

#button { 
    width: 50%; 
    border-width: 1px; 
    border-style: solid; 
    height: 30px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 1

http://jsfiddle.net/zCXMv/19/

J'ai fait les boutons display: inline-block, enlevé le float s et ajouté text-align: center au parent.

.button1, 
 
.button2, 
 
.button3, 
 
.button4 
 
{ 
 
    background:#999; 
 
    padding:6px; 
 
    display: inline-block; // Changed from "block" 
 
    margin-right:5px; 
 
    // Removed floats  
 
} 
 

 
#button 
 
{ 
 
    width: 50%; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    height: 30px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; // Added central alignment to content 
 
}

<div id="button" > 
 
    <a class="button1 active" rel="1"></a> 
 
    <a class="button2" rel="2"></a> 
 
    <a class="button3" rel="3"></a> 
 
    <a class="button4" rel="4"></a> 
 
</div>

Answer 2

Essayez cette css

.button1, 
.button2, 
.button3, 
.button4 { 
    background:#999; 
    padding:6px; 
    display:block; 
    float:left; 
    margin-right:5px; 
} 

#button { 
    width: 50%; 
    border-width: 1px; 
    border-style: solid; 
    height: 30px; 
    margin: 0px auto; 
} 

Answer 3

Essayez ceci:

#button a{ 
display:block; 
margin:auto;} 

Answer 4

Retirez le "display: block" et "float: left" sur les boutons, et d'ajouter "text-align: center" à la définition #button.

L'affichage "inline-block" n'est pas supporté par tous les navigateurs, donc je vous recommande de ne pas l'utiliser à moins d'y être obligé.

Answer 5

Essayez this.It peut travailler:

#button a{display:block;margin:0 auto !important;text-align:center !important;}