CSS表單元格大小 - conterintuitive行爲

Question

看一看以下兩個圖像：

啓用或禁用表單元格屬性丟棄一些寬度和高度的信息。其實我已經將它們禁用了瀏覽器，但重新啓用它們不會改變任何內容。

使用display:table-cell是使用vertical-align將容器中的某些文本居中的唯一方法。

但隨後變得很難與黃色div元素的寬度玩。爲什麼？ （也不知..如果某些屬性時，一些人被啓用瀏覽器可以用不同的顏色標記它們或他們三振。還是會有一些缺點一些元素得到uneffective？）

.grey-footer-background { 
 
    background-color: #a8a7a5; 
 
    height: 70px; 
 
    border-bottom: 1px black solid; 
 
    padding-top: 8px; 
 
    display: table; 
 
    height: 100px; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.gold_button { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    border-right: solid 1px #262626; 
 
    width: 80%; 
 
    height: 60px; 
 
    vertical-align: middle !important; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
    display: table-cell; 
 
}

<div class="grey-footer-background"> 
 
    <div class="gold_button"><span>Email</span> 
 
    </div> 
 
</div>

Answer 1

display:table-cell意味着該div會佔用與任一display:table-row或display:table母體的全寬，除非與其它「小區」共享，然後寬度將它們之間進行分割。你可以讓你的.gold_button表和span表細胞，而不是

.grey-footer-background { 
 
    background-color: #a8a7a5; 
 
    border-bottom: 1px black solid; 
 
    padding: 10px 0; 
 
    width: 100%; 
 
} 
 
.gold_button { 
 
    display: table; 
 
    table-layout: fixed; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    border-right: solid 1px #262626; 
 
    width: 80%; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
    background-color:gold; 
 
} 
 
.gold_button span { 
 
    display: table-cell; 
 
    vertical-align: middle !important; 
 
    height: 60px; 
 
}

<div class="grey-footer-background"> 
 
    <div class="gold_button"> 
 
    <span>Email</span> 
 
    </div> 
 
</div>

Example

Answer 2

Is this what you're looking for? (JSFiddle)

添加：

line-height: desired height 

應該這樣做。