0

inline-block div任意の数のタグを含むコンテナーがあります。

根本的に異なるセットアップを使用せずに、これらのinline-blockタグの 1 つだけ (実際には最後に表示されるタグ) を残りのスペースで中央に配置することは可能ですか? I need centeredの幅divは不明で、その内容に合わせる必要があります。

以下に例を示します: http://jsfiddle.net/Zewav/

と の残りのスペースの#message中央に配置したい#sidebar#container

4

2 に答える 2

1

残念ながら私の知る限りではありません。「根本的に異なる」ものが必要かどうかはわかりません。マークアップをわずかに変更する必要がありますが、求めていることを正確に実行することは完全に可能です。コンテキストについてもう少し知らずに解決策を提供することは困難です。

たとえば、 のコンテンツをdiv中央揃えにしたい場合は、 をお勧めしtext-align:center;ます。中央の要素に背景が必要な場合は、別のdiv/ spanetc を内部にネストします。本当に行き詰まっている場合は、目的が何であるかをもう少し説明してください。解決策を考え出す手助けをします. これに基づくソリューションは次のとおりです。

HTML

<div id="container" class="cf">
    <div id="sidebar"></div>
    <div id="message">
        <span>hello world</span>
    </div>
</div>
...Content after

CSS

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
#sidebar {
    width:200px;
    height:400px;
    background-color:red;
    float:left;
}
#message {
    display:block;
    text-align:center;
}
#message > span {
    padding:10px;
    background:blue;
    display:inline-block;
    color:white;
}

ここでは、 のみをフロートし#sidebarます。次に、#messagediv が を受け取り、display:blockを使用してtext-align:center、ネストされたスパンを中央揃えにします。あとでフロートをクリアする必要があるため、私は micro clearfix ハック.cfも使用していることに気付くでしょう。

編集:スパンを に変更しinline-block、パディングを追加して、それが機能していることを示しました。

于 2013-07-24T21:37:36.650 に答える