Html 页面上的元素居中问题_Html_Css

Html 页面上的元素居中问题

html css

Html 页面上的元素居中问题,html,css,Html,Css,新手到HTML和CSS在这里只有2周的学习下，我的腰带。我正在尝试复制谷歌网页，虽然我已经设法将“谷歌”徽标和搜索栏置于其下方的中心位置，但我使用了页边空白顶部和页边空白左侧属性。我确实试过边际：0自动；有一些其他的财产，但无法得到任何工作。当我使用不同的属性设法将徽标居中时，它在页面上并不完全居中。基本上，我想说的是，我这样做是可行的，但我知道这不是使这两个元素在页面上成为中心的最有效的方法，它当然不代表一个响应性强的网页有没有人介意看一下我贴在下面的代码，并就最好的方法提供建议？我已经包括

新手到HTML和CSS在这里只有2周的学习下，我的腰带。我正在尝试复制谷歌网页，虽然我已经设法将“谷歌”徽标和搜索栏置于其下方的中心位置，但我使用了页边空白顶部和页边空白左侧属性。我确实试过边际：0自动；有一些其他的财产，但无法得到任何工作。当我使用不同的属性设法将徽标居中时，它在页面上并不完全居中。基本上，我想说的是，我这样做是可行的，但我知道这不是使这两个元素在页面上成为中心的最有效的方法，它当然不代表一个响应性强的网页

有没有人介意看一下我贴在下面的代码，并就最好的方法提供建议？我已经包括了整个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>

要使图像居中，可以使用

文本对齐：居中。对于搜索栏，您可以使用margin:0 auto只要搜索栏具有定义的宽度：

*{
框大小：边框框；
}
导航李{
显示：内联块；
字体系列：Helvetica；
字体大小：13px；
宽度：自动；
浮动：对；
颜色：#414042；
}
#gmail{
右边距：15px；
边缘顶部：7px；
填充：0；
}
#图像{
右边距：22px；
边缘顶部：7px；
填充：0；
}
#登录{
右边距：22px；
填充：7px 13px；
背景色：#1789E8；
颜色：白色；
边界半径：2px；
字体大小：粗体；
高度：自动；
文本对齐：居中；
}
#网格列表{
右边距：22px；
边缘顶部：7px；
}
梅因先生{
填料顶部：182px；
文本对齐：居中；
}
#搜索栏{
边框：1px实心#E8DAEB；
边界半径：2px；
填充：0；
文本对齐：居中；
利润率：21px自动0；
高度：46px；
宽度：585px；
}

谷歌

登录


图像
gmail


您不能使用像素设置边距！
您必须将主类的边距设置为页面高度和宽度的50%，如下所示：
（要解决问题，请更改尺寸和裕度的百分比以适应100%）

*{
框大小：边框框；
}
导航李{
显示：内联块；
字体系列：Helvetica；
字体大小：13px；
宽度：自动；
浮动：对；
颜色：#414042；
}
#gmail{
右边距：15px；
边缘顶部：7px；
填充：0；
}
#图像{
右边距：22px；
边缘顶部：7px；
填充：0；
}
#登录{
右边距：22px；
填充：7px 13px；
背景色：#1789E8；
颜色：白色；
边界半径：2px；
字体大小：粗体；
高度：自动；
文本对齐：居中；
}
#网格列表{
右边距：22px；
边缘顶部：7px；
}
梅因先生{
垫面：50%；
左：50%；
}
#搜索栏{
边框：1px实心#E8DAEB；
边界半径：2px；
填充：0；
文本对齐：居中；
利润率：21px自动0；
高度：46px；
宽度：585px；
}
img{
左边距：50%；
}
html，正文{
身高：100%；
宽度：100%；
}

谷歌

登录


图像
gmail


非常感谢您的帮助，我想我已经明白了！在SO和web上有数百个关于如何集中元素的问题。你似乎误解了CSS的一些基本原理。我知道我可能没有最有效地利用我的div和id，我还需要更好地理解框的位置，但我正在学习。开始了解家长/孩子部门的定位…练习！
* {
  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;
}