css - の幅を狭めるcss を使用してブロックする

Question

これは私が作成したページです:

プロパティ幅に数値を使用せずに、オレンジ色を背景色とするブロックの幅を縮小したいのですが、それを行う他の方法はありますか?

float:left; を試しました。それは機能しましたが、左に移動しますテキストの長さとhtmlページの中央のために、幅が自動的に検出されるようにします。

Answer 1

1 つの解決策は、div の周りにラッパー要素を追加することです。

<div id="outer">
    <div id="inner">Vous avez acheté 6 pieces, le total à payer est : 200DH</div>
</div>

その後：

#inner {
    display: inline-block; /* for the background */
}

#outer {
    text-align: center; /* for centering */
}

http://cssdesk.com/Y8SB8

もちろん、div の親にすでにtext-align: center.

Answer 2

自動幅で中央に配置したい場合、1つのオプションはそれをinline要素として扱うことです。

display: inline;

また：

display: inline-block;

親要素がを持っていると仮定するとtext-align: center、これで十分です。