總的來說，我所瞄準的是一個表格，所有的文字都是居中的，當輸入文字時，單元格不會調整大小。如何將文本（垂直和水平）放在表格中，並防止單元格大小調整？

本來我的代碼是這樣的：

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

出現這樣的。不是說他們中的文本行比沒有文本的行高。 enter image description here

我讀了你可以通過添加阻止這種調整大小：

display: inline-block;

這並停止調整大小，但隨後它可以防止中心的文字： enter image description here

有什麼辦法擁有兩全其美？另外，還有什麼方法可以垂直居中文本？

來源

2014-01-12 Miguel

我不明白這一點，但你正在試圖做到這一點：http://jsfiddle.net/jAG3j/？ – drip

是或多或少 – Miguel

@Miguel他所做的是將'vertical-align：middle;'屬性放在'td'而不是'div'上。他還專門設置了'td'的高度，所以不會調整大小。 –

好吧雖然hsobhy發佈了一些工作代碼，但我認爲更好的解決方案是解釋如何修復原始代碼。添加display: inline-block;到div的罰款擺脫電池尺寸調整，但隨後：

需要指定表格單元格（不是DIV）如爲了獲得水平居中居中：

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

我正在設置div的高度，我不應該這樣做。刪除它給了我垂直居中，以及：
```
#table-main td > div { 
    /*Other stuff/* 
    height: 100%; /*This needed to go/* 
}
```

來源

2014-01-12 14:33:40 Miguel

發佈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 and old one

來源

2014-01-12 10:20:28 hsobhy

如何將文本（垂直和水平）放在表格中，並防止單元格大小調整？

回答

CSS

HTML

編輯更好的垂直對齊

相關問題