HTML/CSS - Align horizontaly div

Question

I'm trying to align div horizontally for far too long now. The thing is, I set the width property but it doesn't seems to do anything.

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

Does anybody have a clue ? The divs keep stacking on the left of the container div.

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — puya ars, Sep 27 '18 at 11:50

score 0 · Answer 1 · answered Sep 27 '18 at 11:52

0

you can achieve that using display:flex; and align-items:center;

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

answered Sep 27 '18 at 11:52

Vikas Jadhav

4,597
2
19
37

1

Thank you ! It works as well, not sure wich solution is the best through! – Sep 27 '18 at 12:13

score 0 · Accepted Answer · answered Sep 27 '18 at 11:53

.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 - Align horizontaly div

2 Answers2