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

Jennifer Hughes
Jennifer Hughes
2,083 Points
Posted by Jennifer Hughes
Jennifer Hughes
2,083 Points

How to center my image

Hello,

I am trying to center my image on the page and the following will not work:

img.align-center { display: block; margin: 0px, auto}

So, how do I center the image?

Thanks in advance! (I've included my CSS with my incorrect attempt included in it, under the "Home" comment.) 

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
        <title>Jennifer Hughes</title>
            <link rel="stylesheet" href="css/normalize">
            <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Droid+Serif:400,700|Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
            <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <header>
    <div class="group-content-container">
        <div class="group">
            <nav class="secondary-nav">
                <ul id="secondary-nav" class="group">
                    <li id="menu-item1"><a href="contact.html"id="secondary-nav">CONTACT</a></li>
                </ul>
            </nav>
        </div> <!--end of secondary-nav-->
            <h1 id="main-header">JENNIFER HUGHES</h1>
            <div class="primary-nav">
                <nav class="primary-nav">
                    <ul class="main-nav">
                        <li><a href="index.html"class="selected">Home</a></li>
                        <li><a href="about.html" class="menuitem">About</a></li>
                        <li><a href="portfolio.html" class="menuitem">Portfolio</a></li>
                        <li><a href="blog.html" class="menuitem">Written Words</a></li>
                    </ul>
                </nav>
            </div><!--end of header-->
</header>
<div class="main-container">
    <p id="me">
        <img src="images/me.jpg" alt="photo of me" class="align-center">
    </p>
</div>
<footer>
    <p id="copyright">&copy; 2014 JennHughesDesign.</p>
</footer>
</body>
</html>

/*********************
General
**********************/

body    {
    margin: 0px;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color:#F9FADD;
}

#secondary-nav {
    text-align: right;
    color:; #332f29;
    font-size: 12px;
    margin-right: 25px;
}


h1 {
    font-size: 72px;
    text-transform: lowercase;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #FB1B40;
    color:#D4CEAC;
    text-align: center;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 75px;}


footer {
visibility: hidden;}    

/*********************
HOME PAGE
**********************/

img {
    width: 778px;
    height: 547px;}

img.align-center {
    display:block;
    margin: 0px auto;
}
/*********************
HYPERLINKS
**********************/

li .menuitem
 {color: #332f29;}


ul {list-style-type: none;}

li .selected {
    color:#8fa68e;
}

nav li {
    list-style-type: none;
    font-size: 20px;
    display: inline-block;
    margin-right: 50px;
}

li.publications {
    display: block;
}

a.publications {
    text-decoration: none;
    font-size: 18px;
    line-height: 2.4em; 
}

a:hover {color:#d4ceac;}

a {text-decoration: none;}

.main-nav
    {text-align: center;
    padding: 25px;
    margin-top: -50px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    }

.booklink {font-weight: bold;}

/*********************
ABOUT
**********************/

p {
    margin-left: 35px;
    height: 40%;
    width: 40%;
    font-family: sans-serif;
    line-height: 1.4em;
}

p#aboutme {margin: 10px auto;}

/*********************
PORTFOLIO
**********************/

h2 {
    margin-left: 75px;
    font-size: 30px;
    text-decoration: underline;

}

.main-content {
    margin-left: 120px;}

li .publications 
{font-weight: bold;
color: #332f29;
}

.column1of2 {
    float: left;
    margin: 25px;
    width: 600px
}

.column2of2{
    float:left;
    margin: 25px;
    width: 600px;
}

#webpara {
    font-family: sans-serif;
    width:600px;
}

/*********************
BLOG
**********************/ 
#blogpara {
    font-family: sans-serif;
    width: 180px;
    text-align: center;
}

p#blogpara {
    margin: auto;
}
Jennifer Hughes
Jennifer Hughes
2,083 Points
Jennifer Hughes
Jennifer Hughes
2,083 Points

Update: What I wrote in this comment for my syntax was full of errors, but what I actually tried in my css file was not:

img.align-center { display: block; margin: 0px auto; }

That, even when correctly written, does not center my image.

Dustin Matlock
Dustin Matlock
33,856 Points

Jennifer if you want to do inline code, you can do that by using one backtick before, and after your code.

For example:

    `img.align-center { display: block; margin: 0px, auto}`

P.S. I corrected your original post to reflect that for you.

7 Answers

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hi Jennifer Hughes , in this particular case the problem is coming from the p tag with the id of me that surrounds the image. you could either remove the paragraph altogether or you could add another style to your css that would center this particular paragraph, like so:

p#me {margin: 0 auto;}

both ways would work and fix your problem. hope that helps and have a nice day ;)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jennifer,

You could try removing the <p> </p> tags from around the img and then see if .align-center works for you.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I noticed in your css you have list-style-type: none; you only need list-style: none;

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Jennifer,

What you have written is the correct way to center the image (see http://www.w3.org/Style/Examples/007/center.en.html#block) so it may be an issue with another style such as the dimensions of:

img {
    width: 778px;
    height: 547px;}

or the % width of:

p {
    margin-left: 35px;
    height: 40%;
    width: 40%;
    font-family: sans-serif;
    line-height: 1.4em;
}

If you try to remove any of these does it have any affect?

Thanks

-Rich

Rich Bagley
Rich Bagley
25,869 Points

Hi Jennifer,

Which was the other option you tried?

If it was removing the % on the p tag as in my post above, when you say it moved it too far right, can you also try removing margin-left: 35px; please?

Does this sort it?

Thanks

-Rich

Ryan Peacan
Ryan Peacan
26,764 Points
Ryan Peacan
Ryan Peacan
26,764 Points

Having trouble visualizing it, but is the <p id="me"> tag centered in it's parent element? I'm thinking the image IS centered inside the paragraph, but that the paragraph also needs to be centered.

Also, it may be considered bad practice but applying "text-align: center;" to the parent would also work.

Hope this helped!

Jack Blankenship
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points
Jack Blankenship
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points

your .main-container has no css and looks to be using the body defaults. You could just add

.main-container {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;

}
Jennifer Hughes
Jennifer Hughes
2,083 Points
Jennifer Hughes
Jennifer Hughes
2,083 Points

Thanks everyone, I got it sorted out. I did not need the <p> element surrounding the image. Thanks!

Juan Ignacio Lambardi
Juan Ignacio Lambardi
3,943 Points
Juan Ignacio Lambardi
Juan Ignacio Lambardi
3,943 Points

If you have more than one images with the same attributes you can make cleaner the code using Mixins in Sass like this:

@mixin images { display: block; margin: 0 auto; border: 2px solid red; border-radius: 15px; padding: 5px;