Question

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

Example:

http://jsfiddle.net/LM94B/

鉴于图像大小所需的可变性，我不知道如何在CSS中复制它，以便保持所有居中（每个单元格也水平居中）。使用表是唯一能够通过支持IE6以后可靠地实现此目的的方法吗？

Answer 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

如何在HTML4 / CSS2中复制此表格布局（包括以vert为中心的行）

1 个答案: