Image will not center with margin: auto;

Question

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>

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — FiringSquadWitness, Jul 29 '15 at 05:06
accidentally added that when i was removing some spaces in the url, fixed — Streamer, Jul 29 '15 at 05: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 '15 at 05:10

connexo · Accepted Answer · 2015-07-29T05:18:59.827

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

edited Jul 29 '15 at 05:18

answered Jul 29 '15 at 05:14

connexo

53,704
14
91
128

this is what i was looking for it works just fine now – Streamer Jul 29 '15 at 05: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 '15 at 05: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 '15 at 05:22

Image will not center with margin: auto;

1 Answers1