CSS table-cell size - conterintuitive behavior

Question

查看以下两张图片：

启用或禁用table-cell属性会丢弃有关width和height的信息。实际上我已经通过浏览器禁用了它们，但是重新启用它们什么也没有改变。

使用display:table-cell是使用vertical-align将某些文字置于容器内的唯一方法。

但随后很难使用黄色div元素的宽度。为什么？ （我也想知道..如果某些属性在某些元素被启用时对某些元素无效，浏览器可能会用不同的颜色标记它们或者删除它们。或者会有一些缺点？）

.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的全部宽度，除非与其他＆＃34;单元格共享＆＃34;然后宽度将在它们之间分开。您可以将.gold_button表格和span表格单元格改为

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Example

Answer 2

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

添加：

line-height: desired height

应该这样做。