居中对齐div中的div组

Question

问题

如何让.courseslot框排成一列？

背景

我正在尝试创建一个登录页面，显示我的在线课程供学生购买。每个在线课程都由一个框表示，我稍后可以点击它。

• 我希望这些方框能够居中
• 我也希望他们彼此相邻排队
• 响应如此，如果我添加一个，整个批次将移动，所以它们仍然集体居中。

我现在只使用两个占位符框，直到我开始工作。

代码

HTML

<img>标记供将来使用。我稍后会填写图片。

<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. */
}

我意识到某些css可能有点凌乱;我试图让它保持一致，而且我对CSS一般来说还是相当新的。

使用当前设置，类.courseslot的方框彼此相邻排列，但它们左对齐，而不是居中（浮动：左边可能与此有关，但我我不确定如何解决它。