Question

在下文中，我想改变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。

Answer 1

我过去常常使用的一个技巧就是在容器的左边有填充物，我们可以通过给它一个相等但负的余量来鼓励左兄弟坐在这个空间内。

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

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

Answer 2

尝试设置左边兄弟的宽度和右边的padding-right：右边的兄弟

喜欢这样

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

Answer 3

您可以将float: left;上的#left-sibling更改为position: absolute;。这将使它脱离正常流程，因此不再影响右兄弟。

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

Answer 4

你应该总是在浮动元素上设置一个宽度，否则事情会变得奇怪：）

如果你放了一个

border: solid 1px #000;

对两个div的规则你会看到发生了什么 - ＃right-sibling div正在填充父div（#container）的整个宽度，所以尽管文本实际上与中心对齐，它看起来不是！

Answer 5

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; }

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

中心两个兄弟姐妹中的一个

5 个答案: