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 Neftali Mendez
Neftali Mendez
6,226 Points

How do I centralize my float elements? I'm stuck on this.

/* font-family: 'Sanchez', serif; font-family: 'Oswald', sans-serif; font-family: 'Sigmar One', cursive; font-family: 'Abel', sans-serif; example: h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

*/

salute {

margin-left: 30px; } h2 { font-family:'sanchez', serif; }

a {

text-decoration: none; color: purple; text-align:center; font-family:'oswald', sans-serif; } nav a:hover { color:#fff; background-color: purple; }

body { margin: 0;

}

phone {

height:50px; width: 100%; color:orange; margin-top: 5px; padding-top:20px; background-color: purple; border-bottom: 15px solid black; font-family: 'Abel', sans-serif;

}

logo {

margin:40px 0 10px 80px; height: 150px; min-width:200px; width: 20%; float:left; display:inline-block }

nav li { list-style: none; margin: 20px; display:inline-block;

}

nav {

padding-bottom:10px; float:rigth; display:inline-block;

}

ul { margin: 40px 0 10px; padding: 30px; display:inline-block;

}

banner {

max-width: 860px; min-width: 330px width: 100%; height: 250px; padding-right: 0; display:block; Margin: 30px auto;

}

pawprint {

display:block; margin: auto; padding: 0; width: 804px; height: 164px; }

/********************************* Body *******************************/

#banner, #duo1, #duo2,#pawprint, p, h2, footer { display: none; }

/********************************* Media Query *******************************/

@media (max-width: 800px){

logo {

margin:0 30% 0; padding: 0; }

nav ul li{

display:block; margin:50px; padding: 25px; }

}

/* Newbie here critiques welcome */

4 Answers

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

I'm not quite sure what you are asking by centralize, but I'll give you both possible options.

To center an element, you wouldn't float it, but add auto margins to the left and right like this:

.centered {
  margin: 0 auto;
}

To center the content inside an element you would use:

.text-centered {
  text-align: center;
}

If you could be more clear about what you want to happen and to what elements (and also include your HTML) that would be very helpful.

Neftali Mendez
Neftali Mendez
6,226 Points
Neftali Mendez
Neftali Mendez
6,226 Points

Thank You !

I will love to align My logo and Nav side by side and both centralized

just like in the this website here http://www.goldenpawsmobilespa.com/

no matter what I do they are kind off stuck to the left. 

<!DOCTYPE html>
<html>
  <head>
    <title>Golden Paw Mobile Spa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Abel|Sigmar+One|Oswald:400,700|Sanchez' rel='stylesheet' type='text/css'>
  </head>
    <body>
      <header>
        <h3 id="phone"> Call Us Today ! 407-406-7880</h3>
       </header>

           <logo>
              <a  href="index.html"><img src="img/logo.png" alt="Logo" id="logo"></a>
               </logo>

              <nav>
                   <ul>
                  <li><a href="index.html">Welcome</a></li>
                  <li><a href="pricing.html">Pricing</a></li>
                  <li><a href="services.html">Services</a></li>
                  <li><a href="appointment.html">Book Appointment</a></li>
               </ul>
            </nav>

      <section id="banner">
        <a href="appointment.html"><img src="img/banner1.jpg"alt="Request Appointment"></a>
        </section>


      <section id="intro">
        <img id="pawprint" src="img/Pawprint.jpg" alt="Pet Grooming Paws">
        <h2> id="salute" Pet grooming at your doorstep !</h2>
        <p>
Our pet stylist, are trusted by responsible pet owners and veterinarians alike. Our state of the art grooming units provide a safe and luxurious atmosphere for your pet's spa day.



We provide responsible and personalized service to your pets at your convenience in a stress free, high quality environment. We will take care of your pet without being surrounded by any commotion from other dogs in a cage free zone.
Picture


Our mobile grooming salon unit is fully equipped with clean hot water, air conditioner and high quality products and supplies to look after your dog. 
Not every dog grooming service is the same. Experience, passion, and love for pets always make the difference.  
</p>
      </section>
      <section id="duo1">
         <img src="img/services.jpg">
       <p>We only use top quality Products, Shampoo & Conditioners. Every Bath always  include Sanitary                trim... Learn More</p>
        </section>

      <section id="duo2">
        <img src="img/appointment.jpg">
       <p>New Customer ? Book Your 
          Appointment today and get:

          $10.00  OFF 
           Learn More
        </p> 
      </section>

      <footer>
        <h4> Golden Paws Mobile Spa | All Right Reserved </h4>
      </footer>

  </body>
</html>
Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

First, there is no logo html element. Instead use a div

So I recommend you take the logo and float it left of the unordered list:

<nav>
  <div id="logo"></div>
  <ul></ul>
</nav>

So your div#logo and ul elements are floated left, then to center the nav element you would set a width for it (like 960px) and then add the margin from my previous answer.

Try that out and then let me know if you have any other questions.

Neftali Mendez
Neftali Mendez
6,226 Points
Neftali Mendez
Neftali Mendez
6,226 Points

logo {

margin:40px 0 10px 80px; height: 150px; min-width:200px; width: 20%; float:left; display:inline-block }

nav li { list-style: none; margin: 20px; display:inline-block;

}

nav { width: 960px; margin: 0 auto; padding-bottom:10px; float: left; display:inline-block;

}

<nav> <div id="logo"> <a href="index.html"><img src="img/logo.png" alt="Logo" id="logo"></a> </div>

               <ul>
              <li><a href="index.html">Welcome</a></li>
              <li><a href="pricing.html">Pricing</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="appointment.html">Book Appointment</a></li>
           </ul>
        </nav>

http://port-80-v1vhpmj0xz.treehouse-app.com/index.html

mmm ?

Brandon Barrette
Brandon Barrette
20,485 Points

Getting close! I would add some spacing between the logo and the unordered list, then also add some padding to the unordered list so that it's vertically centered.