CSS表格单元格大小 - conterintuitive行为 [英] CSS table-cell size - conterintuitive behaviour

问题描述

查看以下两个图片：

启用或禁用table-cell属性会舍弃有关宽度和高度的信息。

Enabling or disabling the table-cell attribute discards the information about width and height. Actually I've them already disabled by the browser, but reenabling them changes nothing.

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

Using display:table-cell is the only way to use vertical-align to center some text inside the container.

难以使用黄色div元素的宽度。为什么？
（我也不知道，如果一些属性得到无效的一些元素，当一些其他被启用浏览器可以标记为不同的颜色或删除它们..或者会有一些缺点）

But then it becomes hard to play with the width of the yellow div element. Why? (also I wonder.. if some property get uneffective for some element when some others are enabled the browser could mark them with a different color or strikeout them.. Or there would be some cons?)

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

推荐答案

display：table-cell 表示 div 会占用父元素，除非与其他单元格共享，否则 display：table-row 或 display：table 在他们之间分裂。您可以使 .gold_button 表格和 span 表格单元格

display:table-cell means that the div will take up the full width of the parent with either display:table-row or display:table unless shared with other "cells" and then the width will be split between them. You could make your .gold_button the table and the span the table-cell instead

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

示例

这篇关于CSS表格单元格大小 - conterintuitive行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！