CSS: Je ne peux pas mettre un bouton au milieu d'un élément DIV

Question

J'utilise des boutons CSS de ce tutoriel:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

je dois mettre un bouton au milieu d'un DIV donc c'est centré. Mais je ne peux pas!

Voici le code du bouton:

<a class="button" href="#"><span>Bring world peace</span></a> 

Et voici CSS:

.clear { /* generic container (i.e. div) for floating buttons */ 
    overflow: hidden; 
    width: 100%; 
} 

a.button { 
    background: transparent url('bg_button_a.gif') no-repeat scroll top right; 
    color: #444; 
    display: block; 
    float: left; 
    font: normal 12px arial, sans-serif; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; /* sliding doors padding */ 
    text-decoration: none; 
} 

a.button span { 
    background: transparent url('bg_button_span.gif') no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 

Voici le code que je suis en train d'utiliser:

<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div> 

Answer 1

l'attribut d'alignement pour l'élément div est dépréciée. Vous êtes mieux définir une classe pour cette div, comme suit:

<div class="centerize"> 
    <a class="button" href="#"><span>Bring world peace</span></a> 
</div> 

Et le CSS:

.centerize { 
    text-align: center; 
} 

Notez cependant que la définition du texte-align n'affectera le contenu à l'intérieur du div. Le div lui-même (devrait être) un élément de bloc, et selon où il se trouve dans la structure du document, ne peut pas être centré lui-même.

Juste pour faire un peu plus sûr, vous pouvez faire quelque chose comme ceci:

.centerize { 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 

Maintenant vous pouvez appliquer centerize à tout élément, et cet élément devrait prendre et centre aligner la largeur de l'ensemble du navigateur de son contenu.

Answer 2

Le a.button est flotta à gauche. Vous pouvez essayer float: none; sur cet élément. margin: 0 auto; est également utile pour les éléments d'alignement central.

Cela aide-t-il?

Answer 3

Modifier la classe de bouton pour ces propriétés:

.button{ 
    margin-left:50%; 
    margin-right:50%; 
    position: relative; 
} 

et enveloppez votre lien dans la div comme ceci:

<div align="center"> 
    <a class="button" href="#"><span>Bring world peace</span></a> 
</div>