我的带有页眉、导航菜单、页脚和几个部分的简单网站在除谷歌浏览器之外的所有浏览器中运行良好。当我在 Chrome 中启动它时，它使页面居中，就像在浏览器页面的中间挤压一样。
看看here
我的代码: .PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="design.css">
<style type="text/css"></style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<header id="top_header" >
<h1>Welcome to my world!</h1>
</header>
<nav id="top_menu">
<ul>
<li>HOME</li>
<li>WHO I'M</li>
<li>GALLERY</li>
<li>MY DIARY</li>
<li>BLOG</li>
<ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of Article 1</h1>
<h2>Subtitle of the article 1</h2>
</hgroup>
</header>
<p>This is the first best article ever</p>
<footer>
-Written by Jabir
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of Article 2</h1>
<h2>Subtitle of the article 2</h2>
</hgroup>
</header>
<p>This is the second best article ever</p>
<footer>
-Written by Jabir
</footer>
</article>
</section>
</div>
<aside id="side_news">
<h4>Fatah's update</h4>
Fatah became very stupid!
</aside>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
</body>
</html>
.CSS:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack:center;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:yellow;
border:3px solid black;
padding:20px;
}
#top_menu{
border:red;
background:blue;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid red;
width:220px;
margin:20px 0px;
padding:30px;
background:blue;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid green;
}
最佳答案
删除正文中的 display:-webkit-box; ....
body{
width:100%;
-webkit-box-pack:center;
}
关于php - 为什么 google chrome 将我的页面放在窗口的正中央(CSS 和 HTML 问题)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25104627/