Problems Centering Elements on Page

Question

newbie to HTML & CSS here with only 2 weeks learning under my belt. I'm trying to replicate the Google web page and although I have managed to center the "Google" logo and the searchbar underneath it, i've done it using margin-top and margin-left properties. I did try margin: 0 auto; with some other properties but could not get anything to work. The times when I did manage to center the logo using different properties, it wasn't fully central on the page. Basically what i'm saying is that the way i've done it works, but I know it isn't the most efficient way of making these two elements central on the page and it certainly doesn't represent a responsive webpage.

Would anyone mind having a look at the code i've pasted below and offer advice on the best way to go about this? I've included the whole HTML and CSS code, incase anyone wishes to load the site in Notepad etc. Many thanks in advance!

<!DOCTYPE html>

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

  <body>
    <div class="nav">
      <ul>
        <li id="sign-in">Sign in</li>
        <li id="grid-list">
          <center><img src="grid-list.jpg"/></center>
        </li>
        <li id="images">Images</li>
        <li id="gmail">Gmail</li>
      </ul>
    </div>
    <div class="main">
      <img src="logo.jpg" alt="Google"/>
      <p id="searchbar"></p>
    </div>
  </body>

* {
  box-sizing: border-box;
}

div.nav li {
  display: inline-block;
  font-family: Helvetica;
  font-size: 13px;
  width: auto;
  float: right;
  color: #414042;
}

#gmail {
  margin-right: 15px;
  margin-top: 7px;
  padding: 0;
}

#images {
  margin-right: 22px;
  margin-top: 7px;
  padding: 0;
}

#sign-in {
  margin-right: 22px;
  padding: 7px 13px;
  background-color: #1789E8;
  color: white;
  border-radius: 2px;
  font-weight: bold;
  height: auto;
  text-align: center;
}

#grid-list {
  margin-right: 22px;
  margin-top: 7px;
}

 .main img {
  margin-left: 536px;
  margin-top: 182px;
}

#searchbar {
  border: 1px solid #E8DAEB;
  border-radius: 2px;
  padding: 0;
  text-align: center;
  margin-left: 390px;
  margin-right: 375px;
  margin-top: 21px;
  height: 46px;
  width: 585px;
}

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) There are hundreds of questions on SO and the web about how to center elements. You seem to be misunderstanding some of the fundamentals of CSS. — Rob, Feb 15 '17 at 18:18
I know I'm probably not making the most efficient use of my divs and ids and I also need to understand the box positioning better, but I am learning. Starting to get my head around parent/child div positioning...practice practice practice! — , Feb 16 '17 at 01:04

APAD1 · Answer 1 · 2017-02-15T18:13:22.000

To center an image you can use text-align:center; on the parent element. For the searchbar you can use margin:0 auto; as long as the search bar has a defined width:

* {
  box-sizing: border-box;
}

div.nav li {  
  display: inline-block;
  font-family: Helvetica;
  font-size: 13px;
  width: auto;
  float: right;
  color: #414042;
}

#gmail {
  margin-right: 15px;
  margin-top: 7px;
  padding: 0;
}

#images {
  margin-right: 22px;
  margin-top: 7px;
  padding: 0;
}

#sign-in {
  margin-right: 22px;
  padding: 7px 13px;
  background-color: #1789E8;
  color: white;
  border-radius: 2px;
  font-weight: bold;
  height: auto;
  text-align: center;
}

#grid-list {
  margin-right: 22px;
  margin-top: 7px;
}

.main {
  padding-top:182px;
  text-align:center;
}

#searchbar {
  border: 1px solid #E8DAEB;
  border-radius: 2px;
  padding: 0;
  text-align: center;
  margin:21px auto 0;
  height: 46px;
  width: 585px;
}

<!DOCTYPE html>

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

  <body>
    <div class="nav">
      <ul>
        <li id="sign-in">Sign in</li>
        <li id="grid-list">
          <center><img src="grid-list.jpg"/></center>
        </li>
        <li id="images">Images</li>
        <li id="gmail">Gmail</li>
      </ul>
    </div>
    <div class="main">
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
      <p id="searchbar"></p>
    </div>
  </body>

For the searchbar you should be using an input rather than a p(paragraph). Another tip is that instead of defining margin-top, margin-right, margin-bottom, margin-left, you can use the shorthand margin. The first value is the top margin, next is right margin, then bottom, then left.

If you want the top/bottom and right/left margins to be the same, respectively, you can define 2 values(first being top and bottom and second being right and left). If you want to define a different top and bottom margin but use the same margin for left/right you can define 3 values(first being top, second being right/left and third being bottom).

For example:

margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;

can be written as

margin:20px 50px;

Or the following:

margin-top:50px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;

can be written as:

margin:50px 100px 20px;

Same thing goes for padding.

Thank you very much for your help, think i've got my head around it now! — , Feb 15 '17 at 18:12

score -1 · Answer 2 · answered Feb 16 '17 at 13:18

you can't use pixels to set margin! you have to set margin of the main class to 50% of page height and width like this: (to resolve problems change percent of size and margin to fit 100%)

* {
  box-sizing: border-box;
}

div.nav li {  
  display: inline-block;
  font-family: Helvetica;
  font-size: 13px;
  width: auto;
  float: right;
  color: #414042;
}

#gmail {
  margin-right: 15px;
  margin-top: 7px;
  padding: 0;
}

#images {
  margin-right: 22px;
  margin-top: 7px;
  padding: 0;
}

#sign-in {
  margin-right: 22px;
  padding: 7px 13px;
  background-color: #1789E8;
  color: white;
  border-radius: 2px;
  font-weight: bold;
  height: auto;
  text-align: center;
}

#grid-list {
  margin-right: 22px;
  margin-top: 7px;
}

.main {
  padding-top:50%;
  padding-left:50%;
}

#searchbar {
  border: 1px solid #E8DAEB;
  border-radius: 2px;
  padding: 0;
  text-align: center;
  margin:21px auto 0;
  height: 46px;
  width: 585px;
}
img{
    margin-left:50%;
}
html , body{
height:100%;
width:100%;
}

<!DOCTYPE html>

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

  <body>
    <div class="nav">
      <ul>
        <li id="sign-in">Sign in</li>
        <li id="grid-list">
          <center><img src="grid-list.jpg"/></center>
        </li>
        <li id="images">Images</li>
        <li id="gmail">Gmail</li>
      </ul>
    </div>
    <div class="main">
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
      <p id="searchbar"></p>
    </div>
  </body>

Problems Centering Elements on Page

2 Answers2