如何在 HTML4/CSS2 中复制此表格布局（包括垂直居中的行）答案

【问题标题】：How to replicate this table layout in HTML4/CSS2 (incl. vert-centered rows)如何在 HTML4/CSS2 中复制此表格布局（包括垂直居中的行）
【发布时间】：2013-10-03 17:22:13
【问题描述】：

我目前有一个网页，它使用表格来布置图像链接的行。每行的图像数量可能会有所不同，它们的尺寸可能会有所不同，但它们中的每一个都必须在每一行中垂直居中。因此，行高也可能会有所不同，具体取决于行中最高的图像。

Example:

http://jsfiddle.net/LM94B/

鉴于图像大小所需的可变性，我不知道如何在 CSS 中复制它，以便保持所有居中（每个单元格也水平居中）。在支持 IE6 及更高版本的情况下，使用表格是否是可靠实现这一目标的唯一方法？

【问题讨论】：

标签： html css tablelayout

【解决方案1】：

如果您需要 IE6 支持，那么是的，您最好还是坚持使用表格。但请确保将 role="presentation" 作为属性添加到 <table> 元素，以便现代屏幕阅读器知道它们不是表格数据表，并且不会试图向用户调用它们。

请注意，role="presentation" 是无效的 HTML4，但做一些对用户有用的事情胜过让验证器保持安静。

这并不是说它根本无法完成。这是一个完全 HTML4 有效的无表格解决方案，适用于 IE6 和最新浏览器。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test case</title>
    <style type="text/css">
    a { font-size: 10pt; text-decoration:none; color: #00f; }
    a:visited { text-decoration:none; color: #00f; }
    a:hover { text-decoration:underline; font-weight:bold; }

    .page { text-align:center }
    .page .row { margin-bottom: 20px; }
    .page { margin-top: 24px; }
    .page a { 
        display:inline-block; 
        vertical-align:middle;
    }
    .spacer {
        margin-left: 16px;
    }
    img { border:none; }
    </style>
  </head>
  <body>
    <div class="page">
        <div class="row">
            <a href="#"><img src="http://placehold.it/200x100" alt="placeholder image"><br>Link 1</a>
            <span class="spacer"></span>
            <a href="#"><img src="http://placehold.it/150x150" alt="placeholder image"><br>Link 2</a>
        </div>
        <div class="row">
            <a href="#"><img src="http://placehold.it/180x80" alt="placeholder image"><br>Link 3</a>
            <span class="spacer"></span>
            <a href="#"><img src="http://placehold.it/80x120" alt="placeholder image"><br>Link 4</a>
            <span class="spacer"></span>
            <a href="#"><img src="http://placehold.it/120x100" alt="placeholder image"><br>Link 5</a>
        </div>
    </div>
  </body>
</html>

见http://alohci.net/static/imagerows2.htm

【讨论】：

谢谢，太棒了！这似乎确实适用于 IE6。但是，如果您的解决方案有效，为什么您仍然建议保留表格？
IE6 的渲染异常多，难以控制。例如，display:inline-block; 之类的设置只有在应用于默认内联的元素时才能在 IE6 中运行得相当好。在这个例子中没问题，但它并不总是你想要的。正如您已经发现的那样，在 IE6 中表格标记的布局非常可靠，因此更容易坚持使用它。它并不是真正的那种邪恶，只要它不会给可访问性工具用户带来问题。