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 

应该这样做。