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
Alex Weinberg
2,726 PointsCentering Image in Header
So this is my first attempt at building a website on my own, so it's very basic, and I really don't know what I'm doing. One thing I'm getting stuck on is centering the in the header. I'd like to have it in the center for mobile browsing, and then float it to the left once I'm building for desktop. I'm having trouble moving it from the left right now. It's under the class .logo. I've tried applying auto margin on the class, the image within the class, and the a element within the class as well. Nothing seems to move it. I don't know what's stopping it, and would appreciate any input as to where I might be going wrong. Here is the Html...
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8">
<title>Shafty-Portland's Tribute to Phish</title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="normalize" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" class="logo">
<img src="img/shaftylogo.00_png_srz">
</a>
<nav>
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="dates.html">Dates</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="social-icon">
<a href="https://www.facebook.com/pages/Shafty-Portlands-Tribute-to-Phish/315678355146559"><img src="img/facebook-icon.png"></a>
<a href="mailto:gerberragman@yahoo.com"><img src="img/mail-icon.png"></a>
<a href="https://www.youtube.com/channel/UCo6v4bTht3T9f8BE-4udrxw"><img src="img/youtube-icon.png"></a>
</div>
<div class="wrap">
<section>
<div class="home-video">
<iframe width="560" height="315" src="//www.youtube.com/embed/SG5PN96TzIc" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<footer>
</footer>
</div>
</body>
</html>
and here is the CSS I'm applying right now...
/****************************** General ******************************/
.wrap { margin: auto; width: 90%; }
body { margin 40px 0; font-size: 1em; font-family: sans-serif; background: #F6F6F9; }
a { text-decoration: none; }
/****************************** Social Icon ******************************/
.social-icon { background: lightgrey; width: 30px; border-radius: 10px; position: fixed; right: 0px; top: 120px;
}
.social-icon img { width: 30px; height: 30px; padding-top: 5px }
/****************************** Header ******************************/
.logo img { width: 250px; }
.logo a { margin: 0 auto; }
.logo { width: 100%; display: block; }
/****************************** Home ******************************/
.home-video { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; margin: 30px; }
.home-video iframe, .home-video object, .home-vide embed { position:absolute; top:0; left:0; width:100%; height:100%; }
3 Answers
Máté Végh
25,607 PointsHey,
You can center any inline or inline-block element within a block level element with the text-align property. Since img is an inline element, and you've added display: block; to its parent element, you can simply center the image with a text-align: center;.
.logo {
display: block;
text-align: center;
}
Kallil Belmonte
35,561 PointsTry this:
.logo {
width: 200px;
display: block;
margin: 0 auto;
}
And just adjust the size (width/height) as you want...
Hope it helps : )
Alex Weinberg
2,726 PointsGreat, thank you that worked! I didn't realize text-align would work with an image.
Máté Végh
25,607 PointsYou are welcome! Here is a very useful guide for centering objects: http://css-tricks.com/centering-css-complete-guide/