1

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

Example:

http://jsfiddle.net/LM94B/

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

4

1 回答 1

2

如果您需要 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

于 2013-10-03T07:01:18.557 回答