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 anthony scalise
anthony scalise
2,050 Points

Trying to get a logo centered in a div at top of page

Trying to get a logo centered in a div at top of page. I'd ideally like to have it centered top bottom left and right.

.logopin {
    display:block;
    margin:0 auto;
  max-width:100%;
  padding-top:-80px;
  padding-top:-80px;
}

.topborder {
  max-width:100%;
  height:210px;
  background-color:#2D2C2B;
  overflow:hidden;
}






```html```
<body>

  <div class="topborder">
    <img class="logopin" src=../img/pintitan.png>
  </div>
  <img class="insta" src=../img/insta.png>
  <img class="insta" src=../img/mailxxx.png>
Camille Sébastien Niessen
Camille Sébastien Niessen
2,653 Points

You could use margin-left: auto; & margin-right: auto; on the div with class '.topborder'.

4 Answers

Michael Bates
Michael Bates
13,344 Points
Michael Bates
Michael Bates
13,344 Points

Hiya! Try setting the margin as margin: 0 auto;

Michael Bates
Michael Bates
13,344 Points
Michael Bates
Michael Bates
13,344 Points

If that doesn't work, give this link a view:

https://css-tricks.com/centering-css-complete-guide/

Good luck!

Matt Ramsden
Matt Ramsden
14,152 Points
Matt Ramsden
Matt Ramsden
14,152 Points

Just a quick one, one thing it could possibly be is your link to the CSS file. Make sure it's the full one such as 

<link href="css/stylesheetName.css" type="text/css" rel="stylesheet">

Other than that, just using

text-align: center

on the image class, in your case .logopin works.

<body>
<div class="topborder">
    <div class="logopin">
        <img src="images/icons/Computer.ico" alt="">
    </div>
</div>
</body>

.logopin{
    text-align: center;
}
anthony scalise
anthony scalise
2,050 Points

The div is fine, it's the logo that is off center top and bottom it's more pushed towards the bottom and using padding-bottom or margin- bottom doesn't work. The only thing I could think of is the size of the logo? but I don't get why that wouldn't let me push it upwards more.

Michael Bates
Michael Bates
13,344 Points
Michael Bates
Michael Bates
13,344 Points

Centering content seems to be the bane to every designer/programmer's work. Take a look at the link I posted earlier, and give those other options a go as well. There are all sorts of work-arounds for centering content, but I have had the best luck with flex-box methods. If any of those options in the link doesn't work for you, let us know!