CODEWITHSUNDEEP
htmlcssmargin
Streamer
Streamer

Reputation: 173

Image will not center with margin: auto;

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>

Upvotes: 0

Views: 849

Answers (1)

connexo
connexo

Reputation: 56773

#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% }

Upvotes: 2

Related Questions