Comment puis-je centrer le contenu d'un div flottant: left?

J'ai trouvé cet article et j'ai décidé que j'aimais la façon qu'ils le style des liens et des boutons.
J'ai donc pris le CSS de l'article...

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

Alors j'ai plusieurs boutons dans une ligne que je veux utiliser comme ça...

<div class="buttons">
    <a href="/password/reset/"><img src="pict1.png" class="positive" alt=""/>Button 1</a>
    <a href="/password/reset/"><img src="pict2.png" alt=""/>Button 2</a>
    <a href="/password/reset/"><img src="pict3.png" class="negative" alt=""/>Button 3</a>
</div>

Voir cet exemple: http://reljac.com/csstest.php

Mais que la rangée de boutons, qui peuvent avoir besoin d'être aligné au centre, pas tous à droite ou à gauche. Si je change le CSS...

.buttons a, .buttons button{
    /*display:block;
    float:left;*/
    margin:0 7px 0 0;

Les boutons ne s'affichent plus correctement quand il y a une image, plus précisément dans IE 6,7 & 8.

Voir cet exemple: http://reljac.com/csstest_wo.php

Je peux changer le flotteur vers la droite pour obtenir les boutons pour aligner à droite, mais je ne peux pas comprendre ce qu'il faut faire pour les obtenir centré (comme dans un <td></td>).

Donc le fin mot de l'histoire c'est que je veux utiliser le style comme il est, mais j'ai aussi besoin d'être en mesure de centre de justifier les boutons si nécessaire.

source d'informationauteur Jason | 2009-07-05

  1. 20

    Essayez d'ajouter ceci dans le fichier CSS:

    .buttons
{
    text-align:center;
    margin: 0px auto 0px auto;
}

    L'auto fait le marges égales de chaque côté. Le text-align est un bodge pour les anciens navigateurs.

    EDIT:

    Ajouter une div autour de l'boutons appelés buttonwrapper. appliquez ensuite cette CSS

    .buttonwrapper
{
    position:relative;
    float:left;
    left:50%;
}

.buttons
{
    position:relative;
    float:left;
    left:-50%;
}

    Méthode de prise (mais pas testé) à partir de http://www.pmob.co.uk/temp/centred-float4.htm

  2. 0

    J'ai constaté que lorsque vous avez un parent div float à gauche et un enfant div que vous essayez de centre, un grand nombre de fois les gens oublient l'héritage.

    HTML:

    <div class="parent">
     <div class="child">
          Text
     </div>
</div>

    CSS:

    .parent {
  float: left;
  width: 300px;
}

.child {
  float:        none; /* <-- IMPORTANT! */
  width:        200px;
  margin-left:  auto;
  margin-right: auto;
}

    IMPORTANT :
    L'héritage stipule que l'enfant div est également effectué gauche. Donc, assurez-vous que l'enfant div n'a pas de flotter, puis margin: auto comme d'habitude.