html – 使用display：table-cell水平对齐div

概述我有一张带酒吧的桌子.我使用display：table-cell来对齐底部的内容.问题是容器div不再在相应的TH上水平对齐(它们的宽度没有设置) Here is a jsFiddle that shows the problem 问题 使用table-cell-attribute时的问题是它的行为类似于“真正的表格单元格”,而不再像块或内联元素.如果缺少父元素table-row和table,则会 我有一张带酒吧的桌子.我使用display：table-cell来对齐底部的内容.问题是容器div不再在相应的TH上水平对齐(它们的宽度没有设置)

Here is a jsFiddle that shows the problem

解决方法 问题

使用table-cell-attribute时的问题是它的行为类似于“真正的表格单元格”,而不再像块或内联元素.如果缺少父元素table-row和table,则会匿名生成它们.所以盒子会松动像边缘这样的东西.

你可以在这里阅读更多相关信息：“Tables in the visual formatting model”

我稍微重建你的HTML结构,这似乎工作正常：

DEMO

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  ><span>1</span></p></div></td>            <td><div><p  ><span>2</span></p></div></td>            <td><div><p  ><span>3</span></p></div></td>            <td><div><p  ><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> -Tags)放在底部.要获得数字,您可以轻松地将它们放在< p> -tag中,然后再将它们“移出”.这是由这部分完成的：

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

这表示行高和字体大小为16px.设置顶部就足够了：-16px将其完全移出 – 额外的4px添加了一个不错的填充. 总结

以上是内存溢出为你收集整理的html – 使用display：table-cell水平对齐div全部内容，希望文章能够帮你解决html – 使用display：table-cell水平对齐div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。