0

I am trying to re-create the Google homepage layout for practice and I can't seem to center the Google logo.

I've tried:

  • text-align: center;
  • position: absolute;
  • Increasing the left margin of the logo (but I feel like this is not the right way to do it because it's not centered when I change the browser size.)

I realized that it might be the top bar affecting the logo alignment because when I removed the top bar, the logo became centered. However, putting the Google logo in a separate div and setting position:absolute; also didn't work.

This a link to my project http://codepen.io/wilfredbtan/pen/dXLxOz

Here's a snippet of the topbar and 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>

Here's a snippet of the relevant 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;
}
Nisse Engström
  • 4,636
  • 22
  • 26
  • 40
Wilfred
  • 11
  • 1
  • 5
  • is [this](https://jsfiddle.net/lalu050/4cyp1zpu/) what you want? – Lal Aug 21 '16 at 16:25
  • add #topbar > ul { position:absolute; right: 0;} to your CSS like http://codepen.io/link2pk/pen/GqLVVZ – Praveen Aug 21 '16 at 16:32
  • Possible duplicate of [Best way to center a
    on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally)
     – Ulad Kasach Aug 21 '16 at 17:03

3 Answers3

0

See this fiddle

What I've done here is, moved your logo img to a new div and the width of this new div is 50%. And to make it centered I used margin:0 auto in CSS.

The updated HTML is as below

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

and the updated CSS is as follows

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

#logo {
  /* margin: 50px 0 10px 0; */
  width: 100%;
}
Nisse Engström
  • 4,636
  • 22
  • 26
  • 40
Lal
  • 14,893
  • 4
  • 41
  • 68
  • The google logo becomes very big when I expand the window. How do I fix this? I think my logo size is naturally big but how do I fix the size of the logo to be the same when I'm halfscreen and fullscreen? – Wilfred Aug 21 '16 at 16:51
  • You can just hardcode the width of the logo which will solve the problem. – Lal Aug 22 '16 at 06:04
0

It's very simple. Just change #logo CSS like this:

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

To center an image, use margin: auto; and make it into a block element.

Nisse Engström
  • 4,636
  • 22
  • 26
  • 40
Mohammad Reza
  • 1,254
  • 6
  • 14
  • Hi thanks for the concise answer. The logo is now centralised but the top and bottom margins doesn't seem to be working. How do I fix this? I've also updated my codepen so you can see what I'm talking about. – Wilfred Aug 21 '16 at 16:43
  • You can change the last number for changing the bottom margin, like this: `margin: 50px auto 15px;`. First number is top, second number is left and right, last number is bottom. – Mohammad Reza Aug 21 '16 at 16:48
  • When I change the margin, there seems to be no difference. Is this related to it being a block? I tried changing top and bottom padding and it works. – Wilfred Aug 21 '16 at 16:57
  • @Wilfred No it should be fine. Just add `margin: 50px auto 15px;` to the #logo selector. I changed the code on this answer. and also i think your buttons have some issues on border. – Mohammad Reza Aug 21 '16 at 17:01
0
#logo{
  clear: both;
  display: block;
  margin: 0 auto;
}
Nisse Engström
  • 4,636
  • 22
  • 26
  • 40
highFlyingSmurfs
  • 2,779
  • 2
  • 13
  • 27