html - 垂直和水平对齐父 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. 比方说，我们有第一个框，图像​​和文本。 我希望它们“在中心水平对齐”。

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

例如

如果我在主 div 中有 8 个 child ，他们将显示为

1 2 3 4 5
6 7 8 

我怎样才能改变css来实现以上两件事

Answer 1

只需添加:

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

到你的.categories类