-1

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,738
  • 23
  • 27
  • 42
Wilfred
  • 9
  • 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
  • Does this answer your question? [How can I horizontally center an element?](https://stackoverflow.com/questions/114543/how-can-i-horizontally-center-an-element) – gre_gor Apr 14 '23 at 22:22

4 Answers4

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,738
  • 23
  • 27
  • 42
Lal
  • 14,726
  • 4
  • 45
  • 70
  • 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,738
  • 23
  • 27
  • 42
MohammadReza Mahmoudi
  • 1,294
  • 7
  • 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. – MohammadReza Mahmoudi 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. – MohammadReza Mahmoudi Aug 21 '16 at 17:01
0
#logo{
  clear: both;
  display: block;
  margin: 0 auto;
}
Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
highFlyingSmurfs
  • 2,989
  • 2
  • 15
  • 28
0

My code ended up looking something like this. Might not be the cleanest solution but it worked.

.container {
  display: flex;
  flex-direction: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 400px;
}

.logo-wrapper {
  width: 20%;
  margin: 0 auto;
}

.logo {
  width: 20%;
}
<div class="container">
  <div id="logo-wrapper"></div>
  <img src="Google_2015_logo.svg.png" alt="logo" class="logo">
</div>
<form action="https://www.google.com/search" style="display: flex; align-items: center; flex-direction: column;">
  <div class="rounded-box">
    <input autocomplete="off" type="text" name="q">
  </div>
  <div class="search-button">
    <input type="submit" value="Google Search">
    <input type="submit" value="I'm Feeling Lucky" name="btnI">
  </div>
</form>

Not 100% happy with using px in the CSS but yet to find a better work around!

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
xianainti
  • 1
  • 1