为什么这张图片没有垂直和水平排列在桌子的中心？答案

【问题标题】：Why does this image not line up in the center of the table vertically and horizontally?为什么这张图片没有垂直和水平排列在桌子的中心？
【发布时间】：2011-05-19 20:30:20
【问题描述】：

我有一个 20 像素 x 20 像素的图像，它显示在一个空表的左上角：

<table width="100px">
    <tr>
        <td width='100%' align='center' valign='center'>
            <img id='redimg' src='/images/redimg.gif'/>
        </td>
    </tr>
<table>

如何让它在垂直和水平方向都出现在表格的中心？

【问题讨论】：

请不要告诉我您用于对您的网站进行编码。
td 将是 100% 宽度，除非你告诉它不是
@hunter 一个小的修正，但值得一提的是：除非另有定义，否则tr 元素将在其td 后代之间平均分配。所以 one td 在一行中将是 100% 宽度，在一行中有 two tds，每个 td 将默认为 50%，并且以此类推。

标签： html html-table alignment

【解决方案1】：

试试这个 HTML

<table class="mytable">
    <tr>
        <td>
            <img id='redimg' src='/images/redimg.gif'/>
        </td>
    </tr>
<table>

还有这个 CSS

.mytable
{
    width: 100px;
}

.mytable td
{
    vertical-align: middle;
    text-align: center;
}

【讨论】：

【解决方案2】：

将valign 属性移动到tr 元素，然后将“center”更改为“middle”。

然后将其全部删除并使用 CSS ;-)

【讨论】：