中心的两个兄弟的div之一

StackOverflow https://stackoverflow.com/questions/343282

  •  19-08-2019
  •  | 
  •  

题

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

其他提示

尝试宽度设定到左兄弟和相等填充右：在正确的同胞

像这样

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

可以在float: left;改变#left-sibling到position: absolute;。 这将需要它的正常流动的，所以它不会影响正确的同胞任何更多。

当然，这可能有其他的副作用与您的设计。

您应该总是设置一个宽度上浮动的元素，否则事情就变得怪异：）

如果你把一个

border: solid 1px #000;

这两个div的规则，你会看到发生了什么 - 在＃右兄弟DIV充满着父DIV（的#container）的整个宽度，所以虽然文本的是的实际居中对齐，它看起来是不是！

在文本对齐属性控制的，其中所述属性被施加在容器中的内容物的取向。通过添加以下样式很容易看到：

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

和以下类型：

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

您当然会希望调整的兄弟姐妹的大小，以满足您的需求。边框做了很好的工作，展示什么是真正发生的事情。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top