在下文中，我想更改 CSS，使 right-sibling 真正位于 container 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 添加到 left-sibling 来看到这一点风格。
(注意:我想避免修改 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>
关于css - 居中两个兄弟 div 之一，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/343282/