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

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Vertically center & how to upload img from your computer?

Hi guys firstly I want to ask if there is a way to upload a screen grab if you're using your own text editor to write your own code and not using workspace?

Secondly I am practicing designing my own pages to improve my CSS layout techniques. I'm trying to Vertically center my logo in the navigation so that the logo image and the menu on the right are vertically centered in the navigation bar. however, when if I give the navigation list items equal top and bottom margins that centers them but then the logo is off center. I made the logo a block level element and it is floated left while the ul with a class of main-nav has a display of inline-block and is floated right. The li items inside the .main-nav ul is floated left and is displayed block.

The logo sticks to the top of its container with a space at the bottom while the main-nav sits in the center vertically. When I apply margin to the logo to move it down, then the container gets larger, but the logo and navigation never gets aligned. I did some internet searches but they're all using absolute or table or some other CSS tricks to get it to center align vertically. In all of Guil Hernandez lessons he never had to do that, and his navigation items and logo always aligned. Granted his logo was text, but I don't think that really affects it, I could be wrong.

If there is a way to upload screen grabs from your own computer please let me know and I'll show you what's happening. here is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" content="#">
    <title>Landing page</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header class="main-header clearfix">
      <div class="container clearfix">
          <!-- <img src="img/SG.svg" alt="logo" class="logo"> -->

          <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 12.57">
            <!-- <defs>
              <style>.cls-1{fill:#231f20;}</style>
            </defs> -->

            <title>Logo</title>

            <path class="cls-1" d="M312.13 415.65a.32.32 0 0 1-.33.32h-13a4.11 4.11 0 0 0-2.91 2l-4.89 8.59a3.35 3.35 0 0 1-.51.68h1.61c.44 0 .79-.08 1.37-1.08l3.41-5.91a3.59 3.59 0 0 1 2.81-1.93h10.39a.32.32 0 0 1 .33.32.33.33 0 0 1-.33.33h-7.41a2.88 2.88 0 0 0-2.24 1.61l-3.41 5.9a4.54 4.54 0 0 1-.53.76h1.62a1.08 1.08 0 0 0 1.06-.68l.74-1.27c.49-.84 1.09-1.86 1.45-2.5a4 4 0 0 1 .67-.86h-.89a.33.33 0 0 1-.33-.33.32.32 0 0 1 .33-.32h7.23a.32.32 0 0 1 .33.32.33.33 0 0 1-.33.33h-1.8a2 2 0 0 0-1.67 1.19c-.36.63-1 1.65-1.45 2.48l-.74 1.28a1.72 1.72 0 0 1-1.62 1h-17a.33.33 0 0 1-.33-.33.32.32 0 0 1 .33-.32h1.75a1.72 1.72 0 0 0 1.6-1l5-8.57a4.72 4.72 0 0 1 3.47-2.35h15.89a.33.33 0 0 1 .33.34z" transform="translate(-283.78 -415.32)"/>
          </svg>

          <ul class="main-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>

      </div><!--End main-nav -->
    </header>



  </body>
</html>

/*light green color #72EBAE
dark green #4EC387
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #878787;
  /*line-height: 1.5;  better to use a unit-less value*/
  font: 1em/1.5 "Helvetcia Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}



header {
  margin: 0 auto;
}

.main-header {
  text-align: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  background-color: #222;
}

.container {
  padding-left: 1.5em;
  padding-right: 1.5em;
  max-width: 1150px;
  margin: 0 auto;
}

.logo {
  border-radius: 0;
  fill: #fff;
  width: 80px;
  float: left;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
}

.main-nav {
  float: right;
  margin-top: 12px;
  margin-bottom: 12px;
  display: inline-block;
}

.main-nav li {
  float: left;
  margin-right: 15px;
  display: block;
}

.main-nav li:last-child {
  margin-right: 0;
}

.main-nav a {
  color: #939598;
  text-decoration: none;
}




/* clearfix */

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The logo takes up more vertical space than the nav text, so if you apply the same margins to it (12px) it won't be aligned and it will expand the container.

But if you apply margins adjusted for the difference in size (5px) it aligns and doesn't expand the container.

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Thank you Steven Parker . That fixed it. One more thing. Is there a way to upload screen grabs from your computer? Thanks

Also in future what would be the best way to go about adding a logo to the main nav without having this problems?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Do you mean for the forum? Screen grabs aren't generally very useful here as code would be.

But one idea might be to upload images or other files into a workspace, and then share a workspace snapshot.