将内联块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;
}