7

親と子の2つのdivを使用しています。親の幅は 100% で、そのコンテンツはテキストが中央に揃えられます。

子 div の幅は 0 (またはそれに近い値) で、親 div の中央に配置されたまま、コンテンツに合わせて幅が自動的に拡張されます。例：

+------------ PARENT DIV ------------+
|                                    |
|          ..some content..          |
|                                    |
|           +--CHILD DIV--+          |
|           |Inside child |          |
|           +-------------+          |
|                                    |
+------------------------------------+

+------------ PARENT DIV ------------+
|                                    |
|          ..some content..          |
|                                    |
|      +------ CHILD DIV ------+     |
|      |Inside child with more |     |
|      +-----------------------+     |
|                                    |
+------------------------------------+

子 div に固定幅を設定すると、正しく中央に配置できます。

.parent {
    width: 100%;
}
.child {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

しかし、それは私が必要とするものではありません。コンテンツに応じて幅を拡大するには、子 div が必要です。だから私は使っfloatてみましたnowrap：

.parent {
    width: 100%;
}
.child {
    float: left;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

これは子自体には機能しますが、親のコンテンツとして中心に置かれなくなります。

Javascriptを使用して解決できますが、そうしないことを本当に好みます。

SO で同様の質問を探し回っていますが、この状況に正確に答える質問が見つかりません。

誰か私に光を投げてくれませんか？

コメントをお寄せいただきありがとうございます。

フランシスコ

4

4 に答える 4

5

を使用できますdisplay: inline-block;(< IE7 ではサポートされていません) が、他のすべてのコンテンツを別のブロック レベル要素 ( a<p>や anotherなど<div>)で囲む必要があります。

.parent {
    width: 100%;
    text-align: center;
        border: 1px solid #000;
}
.child {
    display: inline-block;
        border: 1px solid #f00;
}

http://jsfiddle.net/4kpsK/

(赤枠の div をクリックしてコンテンツを追加し、実際の解決策を確認してください。)

于 2013-04-25T09:01:28.207 に答える
0 
.child{display:block; margin: auto;}

動作するはずです。

于 2013-04-25T09:06:21.327 に答える
0

あなたの子供を作る必要がありますinline：

.parent {
    width: 100%;
    text-align: center;
}
.child {
    display: inline;
}

ここでフィドルを参照してください：http://jsfiddle.net/4wXTd/1/

于 2013-04-25T08:53:23.797 に答える
0

代わりにandwidthを使用できると思います。しかし、これには欠点があります: IE では正しく解釈されません (少なくとも <9 だと思います) が、Webkit/Moz/Opera ブラウザーでは安全なはずです。max-widthdisplay:inlinemax-width

于 2013-04-25T08:55:45.367 に答える