對齊到父DIV中的中心子DIV

Question

當尺寸小於768像素時，我試圖在頁面中間對齊DIV

我有一個包含三個不同DIV的父DIV。 因此，我使用了媒體查詢，並且在一個顯示尺寸內，我在display_type和button類中添加了“ clear：both ”。 因此，以這種方式，每個div將位於自己的行中。

<div class="category_header container">
    <div class="products">
        <label class="header t_left">Sorter efter:</label>
        <div class="select t_left">
    </div>
    <div class="display_type">
        <ul class="clearfix">
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="buttons">
        <span class="button"></span>
        <span class="button"></span>
    </div>
    </div>
</div>

然后，我嘗試了幾種方法將它們對准中心，但是它們沒有用。 CSS如下所示：

.container {
    width: 1180px;
    margin: 0 auto;
    padding: 0;
}
.category_header {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 0 0 25px;
}
.products {
    float: left;
    width: 350px;
    margin: 3.5px 0 0;
}
.products label {
    margin: 0 30px 0 0;
    line-height: 40px;
    height: 40px;
    display: block;
}
.display_type {
    float: left;
    width: 350px;
    color: #A1ABB6;
    margin: 12px 0 0;
}
.category_header .buttons {
    float: right;
    width: 427px;
}

我試圖將以下內容添加到父div“ category_header”中，但沒有運氣。 我也對孩子div嘗試過相同的方法。 我在Google上找到了很多解決方案，但似乎沒人能解決。 （顯示：內聯塊；文本對齊：居中等）

@media screen and (max-width: Number px) and (min-width: Number px) 
{
    .category_header {
        margin: 0 auto;
        width: 50%;
    }
}

誰能幫我這個？ 謝謝

Answer 1

嘗試這個：

@media screen and (max-width: 768px)
{
    .display_type, .buttons, .products 
    {
        float:none;
        margin:auto;
    }
}