我们的页面通常有两个并排排列的元素。尽管为此探索了几个角度，但我们似乎无法让它发挥作用。我们并不反对使用 JavaScript，只是觉得基于 CSS 的解决方案应该是可能的。当element2 单独出现时，有没有办法只使用 CSS（必要时还可以使用额外的标记）来使其居中？
有时我们有两个并排的元素。
<div id="container">
<div id="element1">content</div>
<div id="element2">content</div>
</div>但在某些情况下，页面上只有element2，例如：
<div id="container">
<div id="element2">content</div>
</div>【问题讨论】：
标签： html css user-interface layout
有一个纯 css 解决方案，但它不适用于 IE 低于 7 的版本，因为它无法理解兄弟选择器 (+)，因此您可能需要考虑 JavaScript 解决方案（也许是 Dean Edwards 'IE7)。无论如何，一些示例css：
div#element2{
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div#element1 + div#element2{
width:50px;
float:left;
margin:0;
}
关键是 div#element1 + div#element2 行，它选择 div#element2，因为它直接跟在 div#element1 之后。
【讨论】：
严格的 CSS2 解决方案：
#container {
text-align:center;
}
#element1, #element2 {
display:inline-block;
}
内部元素应该像 #container 内的内联文本一样布局，但在内部保持块。
这是标准 CSS，但获得浏览器支持可能需要 some trickery。
【讨论】：
这不是很酷的解决方案，因为表格不再“流行”，但它完全解决了问题（在所有 ie 下）
<style>
#container {
margin:0 auto;
width:100px;
}
#container table{
width: 100%;
text-align:center;
}
#element1{
background-color:#0000ff;
}
#element2 {
background-color: #ff0000;
}
</style>
<div id=container>
<table cellspacing=0 cellpadding=0>
<tr>
<td id="element1">content</td>
<td id="element2">content</td>
</tr>
</table>
</div>
【讨论】：
我认为 Phil 是在正确的轨道上，但你应该尝试使用 CSS last-child 伪类。据我所知，first-child 和 last-child 是 CSS 中逼近 if 构造的唯一方法。
div#container div#element2:last-child {
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div##element2{
width:50px;
float:left;
margin:0;
}
上面的 CSS 基本上说“如果 element2 是其父元素的最后一个子元素，则使用这组样式，否则使用这些其他样式。
这甚至应该在 IE7 中工作。
【讨论】：