在页面上居中元素的问题

时间:2017-02-15 17:54:10

标签: html css html5 css3

新手HTML&这里的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;
}

2 个答案:

答案 0 :(得分:2)

要使图像居中,您可以在父元素上使用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-rightmargin-bottommargin-leftmargin。第一个值是top页边距,下一个是right页边距,然后是bottom,然后是left

如果您希望top / bottomright / left页边距分别相同,则可以定义2个值(首先是{{1} }和top,其次是bottomright)。如果您要定义不同的lefttop保证金但使用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;

答案 1 :(得分:-1)

你不能用像素来设置保证金! 你必须将主类的边距设置为页面高度和宽度的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>