html - 帮助使用不同比例的图像制作居中的列

Question

我正在尝试制作标题为“Friday”、“Saturday”和“Sunday”的三列。每列都有一系列通过嵌入方式嵌入的图像(以 标记结尾，我有 a href 以防您想知道)。

由于图像的纵横比不同(不确定我是否正确使用了该术语)，因此我无法让图像在列标题下方很好地居中。

例如 this图片比 this 宽得多图片。

这是我目前的代码。

<table>
    <tr>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
    </tr>
    <tr>
        <td><div class="featuredGame">
                <a href="http://www.flickr.com/photos/amandarykoff/5748058467/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/amandarykoff/4732779602/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                        <a href="http://www.flickr.com/photos/5chw4r7z/3559678190/"></a>
                        <p> Subway Series </p>
            </div>
        </td>
    </tr>
    <tr>
        <td><div class="featuredGame">
                <a href="http://www.flickr.com/photos/adamzalaznik/4524246710/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/24793373@N07/3823565546/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/unbirthdayparty/5738164359/"></a>
                <p> Subway Series </p>
            </div>
        </td>
    </tr>
</table>

featuredGame的css:

注意 #featured 标签是有意的。此表包含在

中

#featured .featuredGame {
    position: relative;
    height: auto;
    width: 150px;
    font-size: 1.0em;   
}

th td {text-align:center;}

最佳答案

在你的 css block 中放置 margin-left:auto;
margin-right:auto;应该居中

关于html - 帮助使用不同比例的图像制作居中的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6526264/

Answer 1

在你的 css block 中放置 margin-left:auto;
margin-right:auto;应该居中