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 trialLaith Wallace
Courses Plus Student 858 PointsHow 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
<!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>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
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
2,027 Pointsmaybe this:
.profile-photo {
margin: 0 auto 30px;
}
Laith Wallace
Courses Plus Student 858 Pointscan you type that into the HTML file or is it the CSS?
erdragerdragsson
Courses Plus Student 5,887 PointsPut that in the css file
//erdrag
Laith Wallace
Courses Plus Student 858 PointsThanks guys. brilliant
abukhawlah
1,548 PointsHi there
can you please explain why this is correct?
.profile-photo { margin: 0 auto 30px; }
Kang Abraham
1,240 PointsSure
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
Courses Plus Student 2,638 Points.profile-photo {
display: block;
max-width: 30px;
margin: 0 auto 30px;
}
erdragerdragsson
Courses Plus Student 5,887 Pointstry this: margin: 0 auto; or margin: 30px auto;
i hope this helps!
kind regards // Erdrag.