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 Gabriel E
Gabriel E
8,916 Points

How to center items in a div

So I have a small image gallery, but the images are floated to the left, and I need them centered. I've tried every different class for centering content, but it won't budge. It will float to either the left or right if I tell it to, though. So here's my code relating directly to the problem at hand, any help would be appreciated! Thanks,

<style>
    div.img {
        border: 1px solid #ccc;
        transition: 0.2s;
    }

    div.img:hover {
        border: 1px solid #777;
    }

    div.img img {
        width: 100%;
        height: auto;
    }

    div.desc {
        padding: 15px;
        text-align: center;
    }

    * {
        box-sizing: border-box;
    }

    .responsive {
        padding: 0 6px;
        float: left;
        width: 24.99999%; 
    }

    @media only screen and (max-width: 700px){
        .responsive {
            width: 49.99999%;
            margin: 6px 0;
        }
    }

    @media only screen and (max-width: 500px){
        .responsive {
            width: 100%;
        }
    }

    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
</style>

  </head>
  <body>        
    <header>
        <a href="index.html" id="logo">
          <h1>PlaceHolder</h1>
          <h2>PlaceHolder 2.0</h2>   
        </a> 
        <nav>
          <ul>
            <li><a href="index.html" class="selected">Home</a></li>
            <li><a href="about.html">About</a></li>    
            <li><a href="samples.html">Samples</a></li>
            <li><a href="contact.html">Contact</a></li>  
          </ul> 
        </nav>
    </header> 
     <div id="wrapper">
         <h2 id="photoalbum">Transcript Gallery</h2>
        <div class="responsive">    
            <div class="img">
              <a href="img/quartercourtroom.jpg">
                <img src="img/quartercourtroom.jpg" alt="Image 1" width="300" height="200">
              </a>
              <div class="desc">Click to Expand!</div>
            </div>
         </div>

2 Answers

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

I started doing a quick CodePen to show how I'd prefer to do it - using inline-block elements instead of floats. You can see it here

However while doing that, I found a CodePen by someone else that shows an interesting technique for center aligning float elements that you might find useful: How to center floating elements

Hope either of those methods gives you some ideas to best suit your own project. Good luck!

Gabriel E
Gabriel E
8,916 Points

Thanks everyone! I found that Joel's solution worked closer to my needs but both were good. However, the image does not entirely fill up the desc, when I create the css class .desc. This definitely leads to problems. Anyway to fix that?

Brendon Butler
Brendon Butler
4,254 Points
Brendon Butler
Brendon Butler
4,254 Points

Positioning is probably the most annoying, time consuming thing, that definitely needs to be reworked.

I think the solution you're looking for is..

div.img img {
  width: 100%;
  height: auto;
  margin: auto;
}