这里是 HTML 和 CSS 的新手，我只学习了 2 周。我正在尝试复制 Google 网页，虽然我已经设法将“Google” Logo 和搜索栏置于其下方的中心，但我已经使用 margin-top 和 margin-left 属性完成了它。我确实尝试过 margin: 0 auto;具有其他一些属性，但无法正常工作。当我确实设法使用不同的属性将 Logo 居中时，它并没有完全位于页面的中央。基本上我要说的是，我完成它的方式有效，但我知道这不是使这两个元素在页面上居中的最有效方式，而且它当然不代表响应式网页。
有没有人介意看看我粘贴在下面的代码，并提供有关解决此问题的最佳方法的建议？我已经包含了整个 HTML 和 CSS 代码，以防有人希望在记事本等中加载网站。非常感谢!
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="logo.jpg" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main img {
margin-left: 536px;
margin-top: 182px;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin-left: 390px;
margin-right: 375px;
margin-top: 21px;
height: 46px;
width: 585px;
}
最佳答案
要使图像居中，您可以在父元素上使用 text-align:center;。对于搜索栏，您可以使用 margin:0 auto;，只要搜索栏具有定义的宽度即可:
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:182px;
text-align:center;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>对于搜索栏，您应该使用 input 而不是 p(段落)。另一个提示是，不要定义 margin-top、margin-right、margin-bottom、margin-left ，您可以使用简写 margin。第一个值是 top 边距，接下来是 right 边距，然后是 bottom，然后是 left。
如果您希望top/bottom 和right/left 边距分别相同，您可以定义 2 个值(第一个是 top 和 bottom，第二个是 right 和 left)。如果您想定义不同的 top 和 bottom 边距，但为 left/right 使用相同的边距，您可以定义 3 个值(第一个是 top，第二个是 right/left，第三个是 bottom)。
例如:
margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;
可以写成
margin:20px 50px;
或以下内容:
margin-top:50px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
可以写成:
margin:50px 100px 20px;
padding 也是如此。
关于html - 在页面上居中元素的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42256729/