0

I am trying to recreate the google homepage for an assignment on TheOdinProject. How can I get the logo to stick on the center of the screen, with an equal amount of pixels on both side?

Here is my code:

#logo {
  margin: auto;
  position: relative;
  display: block;
  width: 200px;
}
#searchbar {
  margin-left: 650px;
  position: relative;
  width: 1000px;
  line-height: 2;
}
<!DOCTYPE html>
<html>

<head>
  <title>Google Homepage Project</title>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>

<body>
  <div id="logo">
    <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
  </div>
  <div id="searchbar">
    <form action="#" method="POST">
      <input type="text" name="searchbar">
    </form>
  </div>
</body>

</html>

7
  • possible duplicate of Horizontally center a div in a div Jul 29, 2015 at 5:06
  • Your HTML looks invalid: <img src="<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
    – connexo
    Jul 29, 2015 at 5:09
  • accidentally added that when i was removing some spaces in the url, fixed
    – Streamer
    Jul 29, 2015 at 5:09
  • have been playing around with the margins it seems the only way i can get it to move is by giving it a left margin and changing the amount of pixels, there has to be an easier way than this
    – Streamer
    Jul 29, 2015 at 5:10
  • Add text-align: center; to #logo.
    – connexo
    Jul 29, 2015 at 5:11

1 Answer 1

2

#logo {
  margin: auto;
  position: relative;
  display: block;
  width: 200px;
}
#searchbar {
  margin-left: 650px;
  position: relative;
  width: 1000px;
  line-height: 2;
}

#logo img {
  max-width: 100%;
}
  <div id="logo">
    <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
  </div>
  <div id="searchbar">
    <form action="#" method="POST">
      <input type="text" name="searchbar">
    </form>
  </div>

So you have a container div#logo that you assign a width of 200px. Then you put an image inside it with a physical width of 570px. What are you expecting?

To solve it, either resize the image, or assign this css to it:

#logo img { max-width: 100% }
3
  • this is what i was looking for it works just fine now
    – Streamer
    Jul 29, 2015 at 5:16
  • i'm pretty new to all of this so i have no idea what i'm doing really but you guys are always a great help. i thought that the image would conform to the size of the container
    – Streamer
    Jul 29, 2015 at 5:18
  • Which is what the given style rule enforces now, at least in case of an image with a greater width than the container. To also center smaller images, apply #logo { text-align: center; }.
    – connexo
    Jul 29, 2015 at 5:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.