logo标签列表

内联弹性盒子元素的垂直对齐

css
16

我正在尝试垂直对齐同一个div中的3个不同inline-flex元素，但是最后一个元素没有按预期适应。

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

1
将 vertical-align: top 添加到 .container .right - JSFiddle - Vucko
好的！你能把这个评论添加为答案，这样我就可以验证它了吗？ - Ludo
1个回答
24

只需在.container .right中添加vertical-align:top：

.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

1
vertical-align: top; 对我有用，谢谢。 - ttn_
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接