我有以下 HTML 代码。我已经适本地尝试集中对齐父容器 div #header 和其中的子元素 #header1 和 #header2 分别。但是，当我尝试最小化窗口时，父容器似乎没有居中对齐，而且即使在将宽度明确设置为父容器的 width:50%; 之后，子标题似乎也被折叠了。为什么会这样？请解释并帮助我解决这个问题。还要注意它下面的水平导航栏似乎也与我上面提到的相同错误相关联。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
margin:10px auto;
background-color : red;
width:70%;
height:80px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
}
#header1 {
display:inline-block;
width:50%;
text-align:center;
line-height:80px;
}
#header2 {
display:inline-block;
width:50%;
text-align:center;
line-height:80px;
}
#navmenu {
list-style-type:none;
background-color:#444;
border:black 2px solid;
text-align:center;
margin-bottom:20px;
}
#content {
}
#nav {
}
#navmenu li {
border:black 1px solid;
background:yellow;
border-radius:5px;
height:30px;
line-height:30px;
width:33%;
display:inline-block
}
#navmenu li a {
text-decoration:none;
display:block;
}
</style>
</head>
<body>
<div id="bodyContainer">
<div id="header">
<div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>
</div>
<div id="content">
<div id="contentHeader">
<p>You Select ... We Serve </p>
</div>
<div id="nav">
<ul id="navmenu">
<li><a href="#">Home</a></li><li><a href="#">Electronics</a></li><li><a href="#">Fashions</a></li>
</ul>
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>WebApp Version Numbered v1.0. All rights Reserved. </p>
</div>
</div>
</body>
</html>
最佳答案
#header 上的固定高度阻止了文本在较小的屏幕上可见，因为没有足够的空间。我删除了它，所以高度是动态的。
还在 #header1 和 #header2 左右添加了一些边距，这样它们就不会粘在一起了。
折叠的水平菜单项可以通过 box-sizing 和 width: 33.33%
可以在此处找到有关 box-sizing 的更多信息: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
希望这对您有所帮助。
关于html - 为什么最小化窗口会导致 HTML 元素从父容器本身消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29874553/