无论浏览器大小如何,我如何将此Google徽标居中?

时间:2016-08-21 16:20:40

标签: html css

我正在尝试重新制作Google主页布局以供练习,而我似乎无法将Google徽标作为中心。

我试过了:

  • text-align: center;
  • position: absolute;
  • 增加徽标的左边距(但我觉得这不是正确的方法,因为当我更改浏览器尺寸时,它不会居中。)

我意识到它可能是影响徽标对齐的顶栏,因为当我移除顶栏时,徽标变为居中。但是,将Google徽标放在单独的div中并设置position:absolute;也不起作用。

这是指向我的项目http://codepen.io/wilfredbtan/pen/dXLxOz

的链接

这是topbar和logo html的片段:

<div id="container">
  <div id="topbar">
      <ul>
          <li>
              <a href="#">
                  <img src="the_odin_project/google-homepage/images/blueperson.jpg" style="border-radius: 100%" />
              </a>
          </li>
          <li>
              <a href="https://plus.google.com/u/0/notifications/all?hl=en">
                  <img src="the_odin_project/google-homepage/images/notification.png" />
              </a>
          </li>
          <li>
              <a href="https://www.google.com/intl/en/aboout/products/">
                  <img src="the_odin_project/google-homepage/images/apps.png" />
              </a>
          </li>
          <li><a href="https://images.google.com/">Images</a></li>
          <li><a href="https://mail.google.com/">Gmail</a></li>
      </ul>
  </div>
    <img style="" id="logo" alt="google" src="the_odin_project/google-homepage/images/google-logo.png" />
</div>

以下是相关CSS的片段:

body {
  margin: 0 auto;
  padding: 0;
}
#container {
  margin: 10px 0 0 0;
  text-align: center;
}
#topbar {
  margin: 25px 40px 0 0;
}
ul {
  list-style-type: none;
}
li {
  float: right;
  display: block;
  padding: 0 0 0 18px;
}
#topbar ul li {
  font: 12.5px Arial, sans-serif;
}
#topbar ul li:first-child {
  margin-top: -10px;
}
#logo {
  margin: 50px 0 10px 0;
  width: 35em;
  position: relative;
}

3 个答案:

答案 0 :(得分:0)

请参阅此fiddle

我在此处所做的是,将您的徽标img移至新div,此新div的宽度为50%。为了使它居中,我在CSS中使用了margin:0 auto

更新的HTML如下

  <div id="logo-container">
    <img style="" id="logo" alt="google" src="http://res.cloudinary.com/wilfredxd/image/upload/v1471790654/google-logo_paxdp8.png" />
  </div>

,更新的CSS如下

#logo-container {
  width: 50%;
  margin: 0 auto;
}

#logo {
  /* margin: 50px 0 10px 0; */
  width: 100%;
}

答案 1 :(得分:0)

这很简单。只需像这样更改#logo CSS:

#logo {
    margin: 50px auto 20px;
    width: 20em;
    display: block;
    clear: both;
}

要使图像居中,请使用margin: auto;并将其设置为块元素。

答案 2 :(得分:0)

#logo{
  clear: both;
  display: block;
  margin: 0 auto;
}