如何在表格中居中（垂直和水平）文本，并防止单元格大小调整？

Question

总的来说，我的目标是一个表格，其中所有文本都居中，当输入文本时，单元格不会调整大小。

最初我的代码是这样的：

HTML

<table id="main_table">
    <tr>
        <td><div/></td>
        <td><div/></td>
        <td><div/></td>
        <td><div/></td>
        <td><div/></td>
   </tr>
   <!--several more rows here-->
</table>

CSS

#table-main
{
    height:1000px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout:fixed;
}

#table-main td
{
    background-color: #F3F5EF;
    border: 1px #bbb solid;
    color: #333;
    font-family: sans-serif;
    font-size: 100%;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default;
}

#table-main td > div {
    overflow: hidden;
    text-align: center;
    vertical-align: middle; 
    height: 100%;
    line-height: 20px;
}

看起来像这样。并不是说包含文本的行高于没有文本的行。

我读到你可以通过添加：

来停止调整大小

 display: inline-block;

这会停止调整大小，但会阻止文本居中：

有没有办法让两全其美？另外，有没有办法将文本垂直居中？

Answer 1

在Fiddle

上发布了一个示例

CSS

table {width:100%;;} 
table, th, td
{
border: 1px solid #eee; 
}
table td{ padding:10px; 
    width:19% !important; 
    vertical-align: middle; 
    height: 80px !important; 
    overflow:visible;
    line-height: 40px;
}


td > div {
    overflow: hidden;
    text-align: center;
    line-height: 14px;
    display:inline-block
}

HTML

<table id="main_table">
    <tr>
        <td align="center"><div>1</div></td>
         <td align="center"><div>Please note, the easing function names changed in version  1.2.Please note, the easing function names changed in version  1.2. </div></td>
         <td align="center"><div>3</div></td>
         <td align="center"><div>4</div></td>
         <td align="center"><div>5</div></td>
   </tr>
</table>

修改

CSS更新以获得更好的垂直对齐（请注意隐藏其他文字...... Fiddle和old one

Answer 2

好的，虽然hsobhy发布了一些工作代码，但我认为更好的解决方案是解释如何修复原始代码。将display: inline-block;添加到div工作正常以消除细胞大小调整，但随后：

1. 需要将表格单元格（不是div ）指定为居中以获得水平居中：

   #main_table td, #main_table th{
       /*All the other properties*/
       text-align: center;
   }

2. 我正在设置div的高度，这是我不应该的。删除它也给了我垂直居中：

   #table-main td > div {
      /*Other stuff/* 
      height: 100%; /*This needed to go/*
   }