0

Question

How can I get the .courseslot boxes to line up collectively centered?

Background

I'm trying to create a landing page that displays my online courses for students to buy. Each online course is represented by a box which I will later make clickable.

  • I would like the boxes to be centered
  • I also want them lined up next to each other
  • responsive so that if I add one, the whole lot will move over so they are all still collectively centered.

I'm working with only two placeholder boxes at the moment until I get it working.

Code

HTML

The <img> tag is for future use. I'll fill in the images later.

<div id="Courses">
    <div class="courseslot">
        <img>
        <h3>-Name- Only $10!</h3>
        <p>-Description-</p>
    </div>
    <div class="courseslot">
        <img>
        <h3>-Name- Only $10!</h3>
        <p>-Description-</p>
    </div>
</div>

CSS

#Courses {
    margin: 0 20px;
    display: block;
    margin: auto;
    
}
.courseslot {
    float: left;
    padding: 0 10px 0 10px;
    width: 25%; /* Trying to get it so that four fit on  a row. */
}

I realize some of the css might be a bit messy; I was trying to get it aligned, and I am also still fairly new to CSS in general.

With the current set up, the boxes with a class of .courseslot line up next to each other, but they are aligned left, not center (the float: left probably has something to do with this, but I'm not sure how to fix it).

Community
  • 1
  • 1
Thomas Reinstate Monica Myron
  • 99
  • 3
  • Despite being marked a duplicate, this question is different. I was eventually able to solve the problem by using an unordered list and putting everything in `li` instead of divs. Then in css I just used `text-align: center;` on the `ul` and everything snapped into place, responsive and everything. – Thomas Reinstate Monica Myron Oct 11 '16 at 22:35
  • Take a look at this demo i made for you http://codepen.io/JGallardo/pen/qaQZZj – JGallardo Oct 20 '16 at 16:58
  • @JGallardo Thanks. I'm curious what's causing them all to center. It has to be the inline-block, but I'm not sure how it's working. – Thomas Reinstate Monica Myron Oct 20 '16 at 17:12

0 Answers0