显示：表格单元格；在 ie6/7 中解决方法

发布于 2024-09-19 18:18:52 字数 881 浏览 5 评论 0原文

我正在尝试构建一个包含多个单元格的单行 css 表，其中的文本在单元格内垂直居中。基本上我试图用 css 模仿的表格行为是这样的：

<table width="100%" height="54" border="0" bgcolor="red">
 <tr>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
  </tr>
</table>

为了使我的代码在语义上是正确的，我想使用 div 来达到相同的效果。

<div class="job_wrapper">
 <div class="info">
  <div>01</div>
  <div>Campaign 001</div>
  <div>DEMO Client</div>
  <div>128</div>
  <div>449</div> 
 </div>
</div>

问题是 IE 中的 display:table-cell 的解决方法涉及使用 float 属性来覆盖要阻止的显示值。因此我失去了表格单元格中文本的垂直居中。

是否有一种解决方法可以在 IE 中显示：表格单元格，仍然使我能够在 IE 中垂直居中文本？

干杯

原文

I'm trying to build a single row css table with multiple cells that has text that is vertically centered inside the cells. Basically the table behaviour I am trying to mimic with css is this:

<table width="100%" height="54" border="0" bgcolor="red">
 <tr>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
  </tr>
</table>

So that my code is semantically correct I want to use divs to achieve the same effect.

<div class="job_wrapper">
 <div class="info">
  <div>01</div>
  <div>Campaign 001</div>
  <div>DEMO Client</div>
  <div>128</div>
  <div>449</div> 
 </div>
</div>

Problem is that the workaround for display:table-cell in IE involved using the float property which overrides the display value to block. hence I lose the vertical centering of text in a table cell.

Is there a workaround to display:table-cell in IE that still gives me the ability to center text vertically in IE?

Cheers

分享到QQ

分享到微博