垂直对齐inline-flex元素 [英] Vertical align inline-flex elements

问题描述

我试图在同一div中垂直对齐3个不同的inline-flex元素，但最后一个不符合预期.

I am triying to vertical-align 3 different inline-flex elements in a same div, but the last one doesn't fit as expected.

这是一个JSFiddle

HTML

<div class="container">
    <div class="left">
        <span>2014/01/21</span>
    </div><div class="middle">
        <button>Hello</button>
        <button>Bye</button>
    </div><div class="right">
        <ul>   
         <li>Chocolate</li>
         <li>Caramel</li>
         <li>Watermelon</li>
        </ul>
    </div>
</div>

CSS

.container {
   height: 100px;
   width: 100%;
   background-color: blue;
}

.container .left, .container .right {
    height: 100%;
    width: 30%;
}

.container .middle {
    height: 100%;
    width: 40%;
}

.container .left, .container .middle {
    display: -webkit-inline-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -moz-inline-flex;
    -moz-justify-content: center;
    -moz-align-items: center;
}

.container .right {
  display: -webkit-inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-flex-pack: center;
  -webkit-justify-content: center;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  display: -moz-inline-flex;
  -moz-justify-content: center;
  -moz-align-items: center;
  -moz-flex-direction: column;
}

.container .right ul {
    padding: 0;
    margin: 0;
}

推荐答案

只需添加 vertical-align:top 到 .container .right :

.container .right {
  display: -webkit-inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-flex-pack: center;
  -webkit-justify-content: center;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  vertical-align: top;
}

JSFiddle

这篇关于垂直对齐inline-flex元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！