HTML/CSS - 水平对齐 div

Question

我试图水平对齐div太久了。 问题是，我设置了 width 属性，但它似乎没有任何作用。

.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
width: 100%;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}

<div class="vtab">
<div class="left big">Hello, Jean-Michel</div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span ></div>
</div>

有人有线索吗？div 一直堆叠在容器div 的左侧。

Answer 1

.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
display: table;
width: 100%;
box-sizing: border-box;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}

<div class="vtab">
<div class="left big"><span>Hello, Jean-Michel</span></div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span></div>
</div>

Answer 2

您可以使用display:flex;和align-items:center;来实现这一点

.vtab {
display: flex;
align-items: center;
}