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

您可以使用display:flex;和align-items:center;

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

Answer 2

.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>

HTML / CSS-水平对齐div

2 个答案: