Question

我正在尝试制作三个标题为“星期五”，“星期六”和“星期日”的专栏。每列都有一系列通过嵌入嵌入的图像（最终为<img>标记，我有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标记是有意的。此表格包含在<div id="featured">

中

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

th td {text-align:center;}

Answer 1

在你的css块放 margin-left:auto; margin-right:auto; 应该把它放在中心

Answer 2

您的样式规则正在尝试将样式应用于具有id="featured"和class="featuredGame的元素。这是它失败的部分原因。（至少没有嵌入式。）删除id，样式开始起作用。
图像非常大嵌入式收缩吗？如果没有，您的表格设计将无法在标准分辨率浏览器中保存。

Answer 3

尝试更改

th td {text-align:center;}

到

th, td {text-align:center;}

http://jsfiddle.net/blineberry/ubmW3/

这就是你要找的东西吗？

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

3 个答案: