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

CSS

Posted by Nate Thomas
.a{fill-rule:evenodd;}techdegree
Nate Thomas
Front End Web Development Techdegree Student 1,218 Points

Centering img

I cant seem to get this img to center inside of my div. I tried "margin: auto;" but wont work.

Here is part of my code:

HTML: 

<html>
  <head>
    <title>Nate Thomas | Web Developer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles.css"
  </head>
  <body>
    <header>
      <h1 class="main-header">Nate Thomas</h1>
      <h2 class="secondary-header">Web Developer</h2>

    </header>
<!---Start Main Body--->
    <div id="wrapper">

      <div class="profile-pic">
        <img src="img/me-fireworks.jpeg">
      </div>

CSS:

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  background-image: url(img/mochaGrunge.png);
  font-size: 1em;
}

header {
  width: 100%;
  padding-top: 5px;
  margin-bottom: 10px;
  height: 120px;
  background-color:dodgerblue

}

.main-header {
  text-align: center;
  font-size: 3em;
  margin: 10px;
}

.secondary-header {
  text-align: center;
  margin: -15px 0 
}

#wrapper {
  width: 75%;
  margin: auto;
}

.profile-pic img {
  width: 75%;
  border-color: black solid 4px;
  border-radius: 20px;
  margin: auto;
}

1 Answer

Nate Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Nate Thomas
Front End Web Development Techdegree Student 1,218 Points
Nate Thomas
.a{fill-rule:evenodd;}techdegree
Nate Thomas
Front End Web Development Techdegree Student 1,218 Points

I figured out. I used text-align on ".profile-pic"

Sue Dough
Sue Dough
35,800 Points

That generally does not work.

http://stackoverflow.com/questions/7055393/center-image-using-text-align-center