将div与display：table-cell水平对齐

Question

我有一张带有酒吧的桌子。我使用display: table-cell来对齐底部的内容。问题是容器div不再在相应的TH上水平对齐（它们的宽度未设置）

Here is a jsFiddle that shows the problem

Answer 1

问题

使用table-cell - 属性时的问题是它的行为类似于“真正的表格单元格”，而不再像block - 或inline - 元素。如果缺少父元素table-row和table，则会匿名生成它们。因此，该框将会丢失所有内容，例如margin。

您可以在此处详细了解：“Tables in the visual formatting model”

---

我稍微重建了一下你的HTML结构，这似乎工作得很好：

样本

http://jsfiddle.net/insertusernamehere/XPSQG/

CSS

<style>

    #graph th {
        background:         red;
    }

    #graph td {
        min-width:          30px;
        margin:             0;
        padding:            0;
        color:              #222222;
    }

    #graph div {
        display:            block;
        position:           relative;
        margin:             0 auto;
        width:              30px;
        max-width:          30px;
        height:             100px;
        background-color:   #EFEFEF;
        border:             1px solid #000000;
    }

    #graph span {
        position:           absolute;
        left:               0;
        top:                -20px;
        width:              100%;
        color:              #222222;
        font-size:          16px;
        line-height:        16px;
        text-align:         center;
    }

    #graph p.color {
        position:           absolute;
        right:              0;
        bottom:             0px;
        width:              100%;
        margin:             0;
        color:              #222222;
    }

    #graph p.color.c1 {
        background:         #0f0;
    }

    #graph p.color.c2 {
        background:         blue;
    }​

</style>

HTML

<div id="graph">
    <table>
        <tr>
            <td><div><p class="color c1" style="height:20px;"><span>1</span></p></div></td>
            <td><div><p class="color c2" style="height:30%;"><span>2</span></p></div></td>
            <td><div><p class="color c1" style="height:40%;"><span>3</span></p></div></td>
            <td><div><p class="color c2" style="height:50%;"><span>4</span></p></div></td>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>Some long value</th>
        </tr>
    </table>
</div>

如何运作

它基本上将列的内容（绿色百分比<p> - 标记）放在底部。要使数字位于之上，您可以轻松地将它们放在<p> - 标记中，然后再将它们“移出”。这是由这部分完成的：

top:                -20px;
font-size:          16px;
line-height:        16px;

这表示行高和字体大小为16px。设置top: -16px将其完全移出就足够了 - 额外的4px添加了一个不错的填充。 ：）

希望你明白这一点。

注意

您使用此属性的地方：

countunit="0_1_0"

由于这不是有效的HTML，请使用data - 前缀：

data-countunit="0_1_0"

这是有效的HTML5，它也不会在旧浏览器中造成任何麻烦。

Answer 2

有一个技巧可以使用display：table-cell在另一个元素内水平居中。

假设周围的元素具有类.table-wrapper，而内部元素具有.table-cell。使用以下CSS：

.table-wrapper {
  display: table;
  width: 100%;
  text-align: center;
}
.table-cell {
  vertical-align: middle;
}

通过这种方式，您可以将文本或任何内容放在中心.table-cell垂直和水平。