Question

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

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

Answer 1

只需将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

Answer 2

如果您使用自动修复器，则不需要-webkit-前缀来执行所有规则。本指南非常有助于了解如何以Flexbox为中心：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

垂直对齐内联 - 柔性元件

2 个答案: