顯示行內塊元素將不會垂直對齊

我想垂直對齊容器內的兩個框，但它似乎不工作。顯示行內塊元素將不會垂直對齊

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

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

我周圍中搜索類似的問題，但沒有發現任何有用的答案。

來源

2015-05-05 shmnsw

嘗試提供了一個活生生的例子（實際CSS，而不是SASS）。 – Quentin

@Quentin更新 – shmnsw

你究竟在做什麼？我假設你想要兩個建議箱元素的中間部分相互排列，但它們的大小相同，而且它們是這樣。 – Quentin

你需要的line-height添加到您的容器

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

來源

2015-05-05 10:19:32

你說得對 – shmnsw

顯示行內塊元素將不會垂直對齊

回答

相關問題