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

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之后.