在父div中垂直和水平对齐子项

Question

我正在尝试用html创建一个页面，以下是我对div的主要编码

<div class="wrapperCat">

    <div  id="all" class="categories">

          <img style="margin-top: 5px;" src="images/colored_livecha.png" alt="" width="100" height="41" />
          <label class="catText" >All Rings</label>

    </div>

    <div  id="pave" class="categories">

          <img style="margin-top: 5px;" src="images/colored_livecha.png" alt="" width="100" height="41" />
          <label class="catText" >Pave</label>

    </div>

    <div  id="vintage" class="categories">

          <img style="margin-top: 5px;" src="images/colored_livecha.png" alt="" width="100" height="41" />
          <label class="catText" >Vintage</label>

    </div>

    <div  id="contemp" class="categories">

          <img style="margin-top: 5px;" src="images/colored_livecha.png" alt="" width="100" height="41" />
          <label class="catText" >Contemporary</label>

    </div>
</div> 

这些类定义为

.categories{  
    margin: 10px;
    width: 150px;
    height: 159px; 
    background: url("../images/main_cat_bg~iPad.png");
}

.wrapperCat{
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("../images/background~iPad.png");
}

.catText{

    bottom: 0;
    color: #701344;
    font-size: 16px; 
    vertical-align: middle;
    text-align: center; 
}

输出结果如下

我真正想要的是：

1. 让我们说，我们有第一个框，图像​​和文字。 我希望他们成为＆＃34;在中心水平对齐＆＃34;。

2. 我希望所有具有类别类别的div在主包装div中水平显示。

e.g

如果我在主要div中有8个孩子，他们会显示为

1 2 3 4 5
6 7 8 

如何更改css以实现上述两件事

Answer 1

如果我理解你的问题，我的第一次尝试：

在每张图片后插入<br />，然后使用.categories和text-align: center;设置display: inline-block样式。您可能还需要留出一些余量来分隔每个类别块。

.categories{  
    margin: 10px;
    width: 150px;
    height: 159px; 
    background: url("../images/main_cat_bg~iPad.png");
    display: inline-block;
    margin: 5px 5px;
}
...
<div  id="all" class="categories">
    <img style="margin-top: 5px;" src="images/colored_livecha.png" alt="" width="100" height="41" /><br />
    <label class="catText" >All Rings</label>
</div>

如果这是你想要的，请告诉我，如果没有，请进一步解释，我会尽力而为。祝你好运！

Answer 2

只需添加：

display:inline-block;
text-align:center;

到.categories班级

Answer 3

替换

.categories{  
    margin: 10px;
    width: 150px;
    height: 159px; 
    background: url("../images/main_cat_bg~iPad.png") center;
    float:left;
    text-align:center;
}

希望您能通过此更新找到结果