垂直（在元素之上，之下和元素之間）分配空的空間

Question

我發現this topic關於垂直分佈三個具有固定高度的空間的圖像。

我想在固定高度的空間上分佈三個按鈕，但我需要空的（紅色）空間分別在元素之間和頂部和上方分別平均分佈。這是我的代碼：

<-- HTML --> 
<ul id="button-list"> 
<li><span><button>1st button</button></span></li> 
<li><span><button>2nd button</button></span></li> 
<li><span><button>3rd button</button></span></li> 
</ul> 

<-- CSS --> 
#button-list { display:table; height:150px; background: red} 
#button-list button { width: 100%; display:block } 
#button-list li { display:table-row } 
#button-list li span { display:table-cell; vertical-align:middle; background:red } 
#button-list li:first-child, 
#button-list li:last-child { height:20px } 

這是changed fiddle。任何想法？

p.s：我試過沒有<span>標籤的代碼，因爲我認爲<button>標籤可以代替它們。它沒有工作，爲什麼？

Answer 1

停止使用display:table表示除表格數據Fede9390之外的任何內容。
這與使用<table> s一樣糟糕。如果人們會停止使用表格和display:table進行佈局，我們可能會看到諸如排序，分頁和智能過濾器等功能，這些功能從瀏覽器的表格開箱即用，但他們甚至沒有考慮到這些功能，因爲它們會弄亂很多頁面使用表格進行佈局。

可以使用flexbox實現自己的目標：

#button-list { 
    height: 150px; 
    background: red; 
    display: inline-flex; 
    flex-direction: column; 
    justify-content: space-around; 
} 

當您完成後，不要忘記通過Autoprefixer運行你的CSS。如果你想這在具有超過0.01％的市場份額的任何瀏覽器中運行，上面的代碼變成：

#button-list { 
    height: 150px; 
    background: red; 
    display: -webkit-inline-box; 
    display: -webkit-inline-flex; 
    display: -moz-inline-box; 
    display: -ms-inline-flexbox; 
    display: inline-flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
     -moz-box-orient: vertical; 
     -moz-box-direction: normal; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    -webkit-justify-content: space-around; 
     -ms-flex-pack: distribute; 
      justify-content: space-around; 
} 

Answer 2

如果你簡單的擦除#img-list li:first-child, #img-list li:last-child { height:20px }和#img-list li:first-child,#img-list li:last-child { height:20px }，你可以用代碼獲得所需的結果（表格東西）您已經在使用：

http://jsfiddle.net/jhLhhf1u/2/