將內聯塊div與內聯塊同級居中對齊

Question

我有一個包含任意數量的inline-block div標簽的容器。

是否可以僅使用這些inline-block標簽中的一個（實際上是最后一個出現），而不使用根本不同的設置來使自己在剩余空間中居中對齊？ 我需要居中的div的寬度是未知的，並且需要適合其內容。

這是一個示例： http : //jsfiddle.net/Zewav/

我想讓#message集中在#sidebar和#container的剩余空間之間

Answer 1

不幸的是，據我所知。 我不確定您是否需要“完全不同”的東西； 盡管完全有可能完全按照您的要求進行操作，但您將需要對標記做些微更改。 如果不了解上下文，很難提供解決方案。

例如，如果您只是希望div的內容居中對齊，則建議使用text-align:center; 。 如果要在居中元素上有背景，則只需在其中嵌套另一個div / span等。 如果您確實遇到困難，請解釋一下目的是什么，我將盡力幫助您提出解決方案。 這是基於此的解決方案 ：

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 。 然后， #message div占用display:block並使用text-align:center ，將其中的嵌套范圍居中對齊。 你會發現，我還使用了微clearfix劈， .cf因為您需要在事后收拾你的花車。

編輯 ：我只是將范圍更改為inline-block ，並添加了一個填充以演示它的工作原理。

Answer 2

http://jsfiddle.net/feitla/Zewav/8/

我假設您正在問如何在容器內的邊欄和“內容”之間對齊下一個。 您需要使用填充，但請注意文本在側邊欄和內容之間的中間如何對齊。

<div id="container">
    <div id="sidebar"></div>
    <div id="content">
        <div class="message">Lorizzle ass dolor sit fo, mofo we gonna chung dang.</div>
        <div class="message">Nullam sapien velit, aliquet yippiyo, suscipizzle its fo rizzle, gravida vel, arcu.</div>
        <div class="message">Pellentesque shizznit tortizzle.</div>
        <div class="message">Sizzle eros. Fusce izzle ghetto dapibizzle you son of a bizzle tempizzle fo shizzle my nizzle.</div>
        <div class="message">Maurizzle mah nizzle nibh yo turpis. Vestibulum izzle tortor.</div>
        <div class="message">Pellentesque uhuh ... yih! rhoncizzle yo mamma.</div>
        <div class="message">In hac habitasse platea dictumst. .</div>
        <div class="message">Shizzle my nizzle crocodizzle dapibizzle.</div>
        <div class="message">Curabitur tellizzle urna, pretizzle eu, mattizzle ac, daahng dawg vitae, nunc.</div>
        <div class="message">Pizzle suscipizzle. Shizznit semper velit sizzle purus.</div>
    </div>
    <div class="clear"></div>
</div>

#container {
    background:yellow;
    width:100%;
    position:relative;
}
#container > div {
    display:block;
}
#sidebar {
    width:200px;
    height:400px;
    background-color:red;
    float:left;
}
#content {
    margin:0 auto;
    position:relative;
    margin-left:200px;
    padding:0 20px;
}
.message {
    background-color:blue;
}

.clear {
    clear:both;
}