Question

我正在尝试垂直对齐容器内的两个盒子，但它似乎不起作用。

＆＃13;

.container {
    width: 400px;
    height: 400px;
    text-align: center;
    background-color: yellow;
}
.suggested-box {
    width: 40%;
    height: 80%;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0px 0px 1px 0px #000;
}

＆＃13;

<section class="container">
  <section class="suggested-box"></section>
  <section class="suggested-box"></section>
</section>

＆＃13;

我搜索了类似的问题，但没有找到任何有用的答案。

Answer 1

您需要为容器添加行高

.container{
    // size(width, height)
    @include size(97%, 250px);
    margin: 0 auto;
    text-align: center;
    line-height: 250px; //line-height equal the height
}

的jsfiddle：http://jsfiddle.net/zhouxiaoping/gok4r2tr/

显示内联块元素不会垂直对齐

1 个答案: