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 Russell Comer
Russell Comer
26,102 Points

Logo Align Center with FlexBox

For the life of me I cannot get my logo to align center like Guil has it. I've copied everything he has verbatim even went to CSS tricks to try to figure out some other way. I've tried changing the rule to flex-end and the logo will not move from the left hand side. Any one else have this problem?

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Russell Comer , could you post your code here?

Russell Comer
Russell Comer
26,102 Points

<div class="container"> <header class="main-header"> <!-- Logo Goes here --> <a class="site-logo" href="index.html"> <img src="assets/img/cqlogo.png" alt="logo"> </a> <!-- Name goes here if you have no logo image be sure to uncomment--> <!--<h1 class="site-logo">Crimson Quest</h1>--> <ul class="nav"> <li class="active"><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </header> </div>

Russell Comer
Russell Comer
26,102 Points 
.main-header,
.nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

.main-header {
  padding-top: 2em;
}

.site-logo{
  width: 110px;
  align-self: center;
}


/****************************************************
NAVIGATION
*****************************************************/
.nav {
  margin-top: 1.5em;
}

.nav a {
  display: block;
  color: #797e83;
  font-size: 1.125em;
  font-weight: 300;
  text-align: center;
  padding: .4em;
  border-bottom: 1px solid #ebecec;
}

.nav a:hover {
  color: #0b0b0b;
  border-bottom-color: #52bab3;
}

5 Answers

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

to center the logo horizzontaly try this

.site-logo{
width: 110px;
margin: auto;
}
Russell Comer
Russell Comer
26,102 Points
Russell Comer
Russell Comer
26,102 Points

That doesn't work either, as soon as I take away the anchor it works and behaves like I want it to. As soon as I add the anchor it goes right back to the left.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

ok, try this

.main-header, .nav {
display: flex;
flex-flow: column wrap;
}

.main-header {
padding-top: 2em;
}

.site-logo{
width: 110px;
flex: 1 auto;
align-self: center;
text-align: center;}

/**************************************************** NAVIGATION *****************************************************/
.nav {
margin-top: 1.5em;
list-style: none;
padding-left: 0;
}

.nav a {
display: block;
color: #797e83;
font-size: 1.125em;
font-weight: 300;
text-align: center;
padding: .4em;
border-bottom: 1px solid #ebecec;
}

.nav a:hover {
color: #0b0b0b;
border-bottom-color: #52bab3;
}
Russell Comer
Russell Comer
26,102 Points
Russell Comer
Russell Comer
26,102 Points

It's so strange, still the same thing. I removed any styles for anchor elements and it still locks it to the left. Soon as I remove the anchor tag it works fine.

Russell Comer
Russell Comer
26,102 Points
Russell Comer
Russell Comer
26,102 Points

Ok so I think I figured it out, I have to add a class to the anchor element as well as the img element and it works. Seems redundant but if I remove one of the classes it doesn't work so I'll keep both. Thanks for all your help.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

The last code i've posted works for me.

There are two more other method you can try:

  • Download the project file and compare to your to see where is the bug.
  • Inspect the element, with the developers tools in the browser, and try to modify with the editor to find the bug and then adjust your files.