Question

我有一个容器，其中包含任意数量的inline-block div个标记。

是否可以只获取这些inline-block标记中的一个（实际上， last 出现的标记），以便在重新生成空间中居中对齐，而不使用完全不同的设置？我需要居中的div的宽度是未知的，需要适合其内容。

我希望#message位于#sidebar和#container的剩余空间

之间的中间位置

Answer 1

不幸的是，据我所知。我不确定你需要什么“根本不同”;你需要稍微改变你的标记，尽管完全可以完全按照你的要求去做。如果不了解更多关于上下文的信息，很难提供解决方案。

例如，如果您只是希望div的内容与中心对齐，那么我建议text-align:center;。如果你想在居中的元素上有背景，那么只需在里面嵌套另一个div / span等。如果你真的陷入困境，那么请解释一下目的是什么，我会尽力帮助你找到解决方案。的 Here's a solution based off that ：

<强> 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，居中对齐嵌套范围。你会注意到我也在使用micro clearfix hack, .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;
}

中心将内联块div与内联块同级对齐

2 个答案: