Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Adding Pages to a Website Make an About Page

Laith Wallace
PLUS
Laith Wallace
Courses Plus Student 858 Points
Posted by Laith Wallace
Laith Wallace
Courses Plus Student 858 Points

How do you center an image using margin and add 30px margin to the bottom in HTML?

Working on the tasks and came to this problem. THanks

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img style="display:block;" src="img/gratt.png" alt="Photograph of gratt" class="profile-photo">
        <p>Hi, I'm Nick Petit! This is my design portfolio I love my God and family members.</p>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

6 Answers

Ricardo Pareja
Ricardo Pareja
2,027 Points
Ricardo Pareja
Ricardo Pareja
2,027 Points

maybe this:

.profile-photo {
    margin: 0 auto 30px;
}
Laith Wallace
PLUS
Laith Wallace
Courses Plus Student 858 Points
Laith Wallace
Laith Wallace
Courses Plus Student 858 Points

can you type that into the HTML file or is it the CSS?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Put that in the css file

//erdrag

abukhawlah
abukhawlah
1,548 Points
abukhawlah
abukhawlah
1,548 Points

Hi there

can you please explain why this is correct?

.profile-photo { margin: 0 auto 30px; }

Kang Abraham
Kang Abraham
1,240 Points

Sure

You are giving the image 0 margin on the top, and then letting the browser put an automatic amount on the left and right, which will center it and then you are putting 30pixels on the bottom

margin: 0(top) auto (left + right) 30px (bottom);

I know this is a very late answer, but hope it helps

Kang

Irfan Setiadi
PLUS
Irfan Setiadi
Courses Plus Student 2,638 Points
Irfan Setiadi
Irfan Setiadi
Courses Plus Student 2,638 Points 
.profile-photo {
  display: block;
  max-width: 30px;
  margin: 0 auto 30px;
}
erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

try this: margin: 0 auto; or margin: 30px auto;

i hope this helps!

kind regards // Erdrag.