Question

我正在尝试对齐元素，但我遇到了这个问题。我正在使用这个标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <body>
      <table style="width:100%; height: 100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td vertical-align="middle">
                        <div id="progressContainer" style="text-align:center;">
                            Some string here                                                    
                        </div>
                    </td>
                </tr>       
            </table>  
  </body>
</html>

如果我删除它：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，它的中间对齐正确。

此行为在FF和chrome中可重现。

问题：

我在这里做错了吗？

Answer 1

该属性为valign="middle"或style="vertical-align: middle"。没有属性vertical-align。

请参阅11.3.2 Horizontal and vertical alignment

Answer 2

在Quirks模式下，浏览器会出现故意错误。

由于body元素的高度为auto（默认值），height: 100%元素上的table变为auto。

（如果父元素具有auto），则百分比高度将转换为height: auto

如果我们使用，td的vertical-align =“middle”不起作用

2 个答案: