Css 两个兄弟姐妹中的一个居中
在下面，我想修改CSS，使Css 两个兄弟姐妹中的一个居中,css,html,center,Css,Html,Center,在下面，我想修改CSS，使右同级在容器div中真正居中（编辑：不使用绝对定位） #容器{ 宽度：500px； } #左同胞{ 浮动：左； } #右同胞{ 文本对齐：居中； } 垃圾邮件 鸡蛋 在其当前实现中，右同级的居中受左同级的影响——您可以通过将display:none添加到左同级的样式中看到这一点 （注意：我希望避免修改HTML结构，因为据我所知，CSS的全部目的是将标记结构与表示逻辑分离，而这似乎并不是一个真正疯狂的要求CSS来处理。） TIA。您可以更改浮动：左在#左同胞到位置：绝
右同级容器
#容器{
宽度：500px；
}
#左同胞{
浮动：左；
}
#右同胞{
文本对齐：居中；
}
垃圾邮件
鸡蛋
display:none左同级的样式中看到这一点
（注意：我希望避免修改HTML结构，因为据我所知，CSS的全部目的是将标记结构与表示逻辑分离，而这似乎并不是一个真正疯狂的要求CSS来处理。）
TIA。您可以更改浮动：左
在#左同胞到位置：绝对。
这将使它脱离正常流，因此它将不再影响右兄弟
当然，这可能会对您的设计产生其他副作用。您应该始终在浮动元素上设置宽度，否则事情会变得很奇怪：）
如果你把
border: solid 1px #000;
在两个div上进行规则-您将看到发生了什么-右兄弟div填充父div（#容器）的整个宽度，因此尽管文本实际上与中心对齐，但看起来不是这样 文本对齐属性控制应用该属性的容器中内容的对齐方式。通过添加以下样式，很容易看到：
#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }
我建议在文档中添加doctype以避免怪癖模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
您当然会想调整兄弟姐妹的大小以满足您的需要。边框很好地显示了实际发生的情况。尝试为左侧同级设置一个宽度，并为右侧同级设置一个相等的填充：为右侧同级设置一个宽度
像这样
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
width:50px;
}
#right-sibling {
text-align: center;
padding-right:50px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
#容器{
宽度：500px；
}
#左同胞{
浮动：左；
宽度：50px；
}
#右同胞{
文本对齐：居中；
右边填充：50px；
}
垃圾邮件
鸡蛋
我刚才使用的一个技巧是在容器的左侧添加填充，我们可以通过给它一个相等但为负的边距来鼓励左侧兄弟姐妹坐在这个空间内
为了完成这张图片，我们还在容器的右侧添加了与左侧同级宽度相等的填充
<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>
#容器{
宽度：500px；
左侧填充：50px；
右边填充：50px；
}
#左同胞{
边框：实心1px#000；
浮动：左；
宽度：50px；
左边距：-50px；
}
#右同胞{
边框：实心1px#000；
文本对齐：居中；
}
#集装箱2{
宽度：500px；
}
垃圾邮件
鸡蛋
鸡蛋
鸡蛋
垃圾邮件
鸡蛋
鸡蛋
鸡蛋
鸡蛋
鸡蛋
鸡蛋
Good point--我将编辑到问题，以指定我希望避免绝对定位。不，这不正确。虽然#右同级会填充整个宽度，#左同级会影响文本对齐计算。就像我在问题中所说的，如果您将display:none
添加到#left sibling的样式中，“鸡蛋”的位置会发生变化。这是正确的-尽管DIV是全宽的，但文本对齐不是这样工作的-它只能在可用空间内对齐文本。在#right sibling中的文本后添加Eggs
Eggs
Eggs
，您将看到左sibling div下面的行按照您的需要对齐。是的，我的意思是“文本实际上与中心对齐”不是正确的语句，因为左边的兄弟姐妹影响了定心计算。你使用的是绝对定位——不确定你是否看到我在@RoBorg发表评论后修改了这个问题。有没有理由不使用绝对定位，因为这将使它完全符合你的要求？这是一个测试示例——在我正在处理的真实页面中，这是嵌套在页面中较远的位置，并且必须在自动生成的内容中相对定位。绝对定位仅适用于不受未知流影响的标题等内容。您可以在#容器中使用相对定位。如果你想要一个像样的答案，这类信息也很重要。我认为说“没有绝对定位”等同于要求相对定位。不对吗？太棒了！这正是我所需要的。：）另一方面，您应该只对每个HTML文档中的一个元素应用一个“id”。对于超过1个，请使用“类”标识符。再次感谢你的伟大解决方案。好东西@rohancragg。这对我来说也很有用。我完全删除了ID，改为使用“class”。非常感谢。
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
width:50px;
}
#right-sibling {
text-align: center;
padding-right:50px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
<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>