web-dev-qa-db-fra.com

Obtenir un élément CSS pour redimensionner automatiquement la largeur de contenu et être centrée en même temps

J'ai un élément CSS, avec une bordure autour de celle-ci, qui pourrait avoir une ou plusieurs boîtes dedans, de sorte que la largeur de l'ensemble de la div changente en fonction du nombre de boîtes présentes à l'intérieur. Cependant, je veux que toute cette div soit centrée sur l'écran.

Habituellement, pour centrer des choses, je viens d'utiliser:

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

Mais, cette fois, je dois soit flotter l'élément, soit le rendre inline-block, de sorte que la taille de la div puisse être redimensionnée au contenu, et si je le fais, l'auto de la marge-gauche et de la marge ne fonctionne pas, Il reste toujours juste 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 à la place de display: inline-block.

Est-ce que quelqu'un connaît un bon moyen de centrer une division et de lui permettre d'être redimensionné au contenu simultanément? Toute aide serait grandement appréciée.

cssresizecenter
13
Anthony

Avez-vous essayé de le garder en ligne en ligne et de la mettre à l'intérieur d'un élément de niveau de bloc qui est réglé sur text-align: center?

Par exemple.

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 décrivez: http://jsfiddle.net/pauldwaitite/pyakb/

13
Paul D. Waite

Malheureusement, cela ne peut pas être atteint à travers CSS uniquement, je ne pense pas. Vous pouvez toujours utiliser JavaScript pour centrer la div une fois que vous connaissez sa largeur (c'est-à-dire une fois que les cases ont été ajoutées) 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');
});
1
BenM