8

在下文中，我想更改 CSSright-sibling以使div真正居中。container（编辑：不使用绝对定位）。

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

4

5 回答 5

6

我刚刚用来让它工作的一个技巧是在容器的左侧有填充，我们可以通过给它一个相等但负的边距来鼓励左兄弟坐在这个空间内。

为了完成图片，我们还在容器的右侧放置了与左兄弟宽度相等的填充。

<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>
于 2008-12-05T11:38:27.800 回答
2

尝试将宽度设置为 left-sibling 和相等的 padding-right: 到 right-sibling

像这样

<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>
于 2008-12-05T09:59:26.020 回答
1

您可以将float: left;on更改#left-sibling为position: absolute;. 这将使其脱离正常流程，因此不会再影响右兄弟姐妹。

当然，这可能会对您的设计产生其他副作用。

于 2008-12-05T09:20:14.617 回答
1

您应该始终在浮动元素上设置宽度，否则事情会变得很奇怪:)

如果你放一个

border: solid 1px #000;

在两个 div 上使用规则，您会看到发生了什么 - #right-sibling div 填充了父 div (#container) 的整个宽度，因此虽然文本实际上与中心对齐，但看起来并非如此！

于 2008-12-05T09:27:07.067 回答
1

text-align 属性控制应用该属性的容器中内容的对齐方式。通过添加以下样式很容易看到：

#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

我建议在文档中添加一个 doctype 以避免 quirksmode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

以及以下样式：

#container { width: 500px; position:relative; border:1px Solid Black; }
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; }
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

您当然希望调整兄弟姐妹的大小以满足您的需要。边界很好地展示了真正发生的事情。

于 2008-12-05T09:38:36.920 回答