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

Example:


http://jsfiddle.net/LM94B/

给定所需的图像大小可变性,我不知道如何在CSS中复制此图像,以便保持所有居中(每个单元格也都居中居中)。使用表是支持IE6及更高版本的可靠方法的唯一途径吗?

最佳答案

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

关于html - 如何在HTML4/CSS2中复制此表格布局(包括以垂直居中的行),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19152169/

10-11 06:10
查看更多