文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的毛利率:10%的汽车；工作？

问为什么我的毛利率:10%的汽车；工作？
EN

Stack Overflow用户

提问于 2017-01-18 17:46:25

回答 3查看 384关注 0票数 1

出于某种原因，我的父div ( #box_one )通过使用( #box_one{ margin: 10px auto 10px auto; } )在我的页面中非常好地居中，但是当我尝试对它的子元素( #box_one > div )使用相同的技术时，它只是垂直地对它进行居中。有人能解释一下为什么会这样吗？

<!DOCTYPE html> 
<html> 
<head>  
    <title>Text</title> 
    <style type="text/css">    
        #box_one{
            border: 1px solid black;
            width: 400px;
            margin: 10px auto 10px auto;
        }

        #box_one > div{
            height: 200px;
            border: 1px solid black;
            margin: 10px auto 10px auto;
        }
    </style>
</head>
<body> 
    <div id="box_one">
        <div></div>
    </div>
</body> 
</html>

css

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-01-18 17:52:19

您需要将显式width添加到子div中。

#box_one {
  border: 1px solid black;
  width: 400px;
  margin: 10px auto;
}
#box_one > div {
  height: 200px;
  border: 1px solid black;
  margin: 10px auto;
  width: 50%
}

<div id="box_one">
  <div></div>
</div>

票数 0

Stack Overflow用户

发布于 2017-01-18 18:23:49

从技术上讲，子元素是居中的，也就是说它的自动水平边距都被归零了。之所以出现这种情况，是因为您的子元素与#box_one本身不同，没有设置宽度。

当未显式设置块框(display: block)的宽度或将其设置为auto时，该框将水平拉伸以适应其包含的块导致其自动水平边距被归零。。

如果“宽度”设置为“auto”，则任何其他“auto”值都将变为“0”，而“宽度”则遵循由此产生的相等。

票数 0

Stack Overflow用户

发布于 2017-01-18 19:58:44

只要向#box_one > div{}添加一个宽度，您就会变成金色的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41726086

复制

相似问题

问为什么我的毛利率:10%的汽车；工作？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的毛利率:10%的汽车；工作？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的毛利率:10%的汽车；工作？
EN