在下文中,我想改变CSS,使得右兄弟在容器div中真正居中. (编辑：不使用绝对定位).
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
}
#right-sibling {
text-align: center;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
在当前的实现中,正确的兄弟中心受到左兄弟的影响 – 你可以通过在左兄弟的风格中添加display：none来看到这一点.
(注意：我想避免修改HTML结构,因为据我所知,CSS的重点是将标记结构与表示逻辑分离,这似乎不是一个非常疯狂的CSS请求处理.)
TIA.
解决方法
我刚刚用来使这个工作的一个技巧是在容器的左边有填充物,我们可以通过给它一个相等但负的边缘来鼓励左兄弟坐在这个空间内.
为了完成图片,我们还在容器的右侧放置了与左侧兄弟宽度相同的填充.
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
padding-left:50px;
padding-right:50px;
}
#left-sibling {
border: solid 1px #000;
float: left;
width:50px;
margin-left:-50px;
}
#right-sibling {
border: solid 1px #000;
text-align: center;
}
#container2 {
width: 500px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container'>
<div id='left-sibling' style="display:none;">Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container2'>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
</body>
</html>
