0

コンテナー内で水平方向に動的に中央揃えする必要がある可変サイズの div があります。これが現在の構造です...

<div class="outer">
    <div class="inner">Sample</div>
</div>

...「内側」の div は、そのコンテンツに基づいて高さと幅が非常に大きくなるものであり、「外側」の div 内で水平方向に中央揃え (左右のスペースが等しい) にする必要があります。寸法が固定されていない場合があります（したがって、「内側」は「外側」divの幅内にあるか、はみ出す可能性がありますが、常に中央に配置されます）。私が現在持っているスタイルは次のとおりです...

.outer {
    width: 10px;
    margin: 0 auto;
    position: relative;
}
.inner {
    position: absolute;
    bottom: 0;
}

...「外側」のプロパティは、それが含まれているものの中央に配置するのにうまく機能しますが、「内側」のプロパティは「外側」の div の左端に揃えます。

「内側」の負のマージンと左右の値を使用していくつかのオプションを試しましたが、それらは固定ピクセル値に依存しているように見えましたが、コンテンツに対して可変のままにする必要があります。

注意点は、「外側」の高さが「外側」の高さが内側。

実行例を次に示します: http://jsfiddle.net/bVC3J/

JSを使用せずにこれを達成する方法について誰か考えがありますか? CSS ソリューションがない場合は、JS を受け入れるので、最後の手段としてそれを提案してください。ありがとう。

4

1 に答える 1

0

これはあなたのために仕事をするかもしれません: http://jsfiddle.net/fF3A4/1/

.outer {
    width:300px;
    height:300px;
    display:table-cell;
    background:#333;
    vertical-align:bottom;
    text-align:center;
}
.inner {
    width:200px;
    margin:0 auto;
    background:#ccc;
    display:inline-block;
}
于 2012-12-20T23:36:30.463 に答える