Obtenir un élément CSS à redimensionner automatiquement à la largeur du contenu, et en même temps être centré

J'ai un CSS de l'élément, avec une bordure autour d'elle, ce qui pourrait avoir une ou plusieurs cases, donc la largeur de la div en entier change en fonction de combien de cases sont présents à l'intérieur de lui. Cependant, je veux que tout div être centrée sur l'écran.

Généralement, au centre des choses, je viens de l'utiliser:

margin-left: auto;
margin-right: auto;

Mais, cette fois, j'ai du flotteur de l'élément ou de la faire inline-block et donc la taille de la div sera redimensionnée pour le contenu, et si je le fais, le margin-left et margin-right automatique ne fonctionne pas, il est toujours reste simplement sur le côté gauche de l'écran.

Actuellement, j'ai:

#boxContainer {
    display:inline-block;
    clear:both;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
}

J'ai aussi essayé avec float: left au lieu de display: inline-block.

Quelqu'un connais un bon moyen à la fois de centrer une div et lui permettre d'être redimensionnée pour le contenu en même temps? Toute aide serait grandement appréciée.

source d'informationauteur Anthony

  1. 13

    Avez-vous essayé de le garder inline-block, et de le mettre à l'intérieur d'un bloc de niveau élément qui est mis à text-align: center?

    E. g.

    HTML

    <div id="boxContainerContainer">
    <div id="boxContainer">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
</div>

    CSS

    #boxContainerContainer {
    background: #fdd;
    text-align: center;
}

#boxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
}

#box1,
#box2,
#box3 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
}

    Semble fonctionner comme vous le décrivez: http://jsfiddle.net/pauldwaite/pYaKB/

  2. 1

    Malheureusement, cela ne peut pas être atteint par le biais de CSS uniquement, je ne pense pas. Vous pouvez toujours utiliser le JavaScript pour le centre de la div une fois que vous connaissez sa largeur (c'est à dire après les boîtes ont été ajoutés) par exemple:

    $(document).ready(function() {
    var itemWidth = $('#boxContainer').width();
    var availWidth = $(screen).width();
    var difference = availWidth - itemWidth;
    $('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});