web-dev-qa-db-ja.com

CSS要素を取得してコンテンツの幅に自動的にサイズ変更し、同時に中央揃えにする

CSS要素があり、その周囲に境界線があり、1つまたは複数のボックスを含めることができるため、div全体の幅は、その内部に存在するボックスの数に応じて変化します。ただし、このdiv全体を画面の中央に配置したいと考えています。

通常、物事を中央に配置するために、私は次のように使用します：

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

しかし、今回は、要素をフロートするか、インラインブロックにする必要があります。これにより、divのサイズがコンテンツに合わせてサイズ変更されます。これを行うと、margin-leftおよびmargin-right autoが機能しなくなります。常に画面の左側にとどまります。

現在私は持っています：

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

float: leftではなくdisplay: inline-blockも試しました。

誰かがdivを中央に配置し、同時にコンテンツに合わせてサイズ変更できるようにする良い方法を知っていますか？どんな助けでも大歓迎です。

cssresizecenter
13
Anthony

インラインブロックを維持し、text-align: centerに設定されているブロックレベルの要素内に配置してみましたか？

例えば。

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;
}

あなたが説明するように動作するようです： http://jsfiddle.net/pauldwaite/pYaKB/

13
Paul D. Waite

残念ながら、これはCSSだけでは実現できないと思います。たとえば、幅を知ったら（つまり、ボックスが追加された後）、JavaScriptを使用してdivを中央に配置できます。次に例を示します。

$(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