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!
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
anthony scalise
2,050 PointsTrying 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>
4 Answers

Michael Bates
13,344 PointsHiya! Try setting the margin as margin: 0 auto;

Michael Bates
13,344 PointsIf that doesn't work, give this link a view:
https://css-tricks.com/centering-css-complete-guide/
Good luck!

Matt Ramsden
14,152 PointsJust 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
2,050 PointsThe 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
13,344 PointsCentering 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!
Camille Sébastien Niessen
2,653 PointsCamille Sébastien Niessen
2,653 PointsYou could use margin-left: auto; & margin-right: auto; on the div with class '.topborder'.