Question

新手HTML＆amp;这里的CSS只有2周的时间学习。我正在尝试复制Google网页，虽然我已设法将“Google”徽标和其下方的搜索栏集中在一起，但我使用了margin-top和margin-left属性。我确实尝试过margin：0 auto;与其他一些属性，但无法得到任何工作。我确实设法使用不同的属性使徽标居中的时候，它并不完全位于页面的中心位置。基本上我所说的是我所做的方式是有效的，但我知道这不是使这两个元素在页面上居中的最有效方式，它肯定不代表响应式网页。

有人会介意看看下面粘贴的代码，并就最佳方式提供建议吗？我已经包含了整个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;
}

Answer 1

要使图像居中，您可以在父元素上使用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个值（首先是{{1} }和top，其次是bottom和right）。如果您要定义不同的left和top保证金但使用bottom / left的相同保证金，则可以定义3个值（首先是right，第二个是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;。

Answer 2

你不能用像素来设置保证金！你必须将主类的边距设置为页面高度和宽度的50％，如下所示：（解决问题会改变大小和边距百分比以适应100％）

* {
  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:50%;
  padding-left:50%;
}

#searchbar {
  border: 1px solid #E8DAEB;
  border-radius: 2px;
  padding: 0;
  text-align: center;
  margin:21px auto 0;
  height: 46px;
  width: 585px;
}
img{
    margin-left:50%;
}
html , body{
height:100%;
width:100%;
}

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

在页面上居中元素的问题

2 个答案: