Wilfred Wilfred - 3 months ago 11
CSS Question

How do I center this Google logo regardless of browser size?

I am trying to re-create the Google homepage layout for practice and I can't seem to center the Google logo. I'm fairly new at coding (1 month of experience) so please excuse my lack of knowledge.

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 center when I change the browser size.)



I realized that it might be the top bar affecting the logo alignment cos' when I removed the top bar, the logo became centralized. 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;
}

Lal Lal
Answer

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%. Nad 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%;
}