实施例

Question

我们有一个页面，通常有两个元素并排排列。尽管从这个角度探讨了几个角度，但我们似乎无法使其发挥作用。我们不反对使用JavaScript，它只是觉得基于CSS的解决方案应该是可能的。是否有一种方法可以使用CSS（如果需要可能还有额外的标记）使element2在它自己出现时居中？

实施例

有时我们并排有两个要素。

<div id="container">
  <div id="element1">content</div>
  <div id="element2">content</div>
</div>

但在某些情况下，页面上只有element2，例如：

<div id="container">
  <div id="element2">content</div>
</div>

Answer 1

有一个纯css解决方案，但它不适用于小于7的IE版本，因为它不会理解兄弟选择器（+），因为你可能想要考虑一个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之后。

Answer 2

我认为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中使用。

Answer 3

严格的CSS2解决方案：

#container {
    text-align:center;
}
#element1, #element2 {
    display:inline-block;
}

内部元素应该像#container中的内联文本一样布局，但内部仍然是块。

这是标准的CSS，但获得浏览器支持可能需要some trickery。

Answer 4

这不是很酷的解决方案，因为桌子不再是“新潮”了，但它完全解决了问题（在所有情况下）

<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>

单独使元素居中，但与其他元素对齐时向右对齐

实施例

4 个答案: