CSS：如何垂直對齊div中顯示的元素：table-cell

我想垂直對齊兩個按鈕和一個div內的span。該div有：CSS：如何垂直對齊div中顯示的元素：table-cell

display: table-cell

我不知道該怎麼做。我有這Fiddle和當你可以看到元素水平對齊。我需要他們將垂直對齊。

我該怎麼做？

來源

2015-08-26 Mulgard

已被垂直於Firefox和Chrome對齊。 http://prntscr.com/8972ja –

不知道你的意思。我發佈了一個jsfiddle。它不是垂直的同源。在您發佈的鏈接中，它們也不會垂直對齊。我想你錯過了這個問題。 – Mulgard

你想要所有的元素都有堆疊效果嗎？ –

按鈕的默認顯示值爲display: inline-block。

將按鈕設置爲讓display: block覆蓋整個寬度並將它們對齊以margin: 0 auto居中。

.postcard-left-menu { 
 
    display: table; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 10%; 
 
    height: 100%; 
 
    background-color: #57D5B8; 
 
} 
 
.postcard-left-menu-buttons { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    height: 50%; 
 
    background-color: red; 
 
} 
 
.postcard-left-menu-buttons .button { 
 
    font-size: 25px; 
 
    color: white; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
.postcard-left-menu-buttons span { 
 
    font-size: 25px; 
 
    color: white; 
 
}

<div class="postcard-left-menu"> 
 
    <div class="postcard-left-menu-buttons"> 
 
    <button class="button">-</button> 
 
    <span>1</span> 
 
    <button class="button">+</button> 
 
    </div> 
 
</div>

來源

2015-08-26 18:32:53

多數民衆贊成它。謝謝 – Mulgard

@Mulgard沒問題！ :) –

CSS：如何垂直對齊div中顯示的元素：table-cell

回答

相關問題