html - text-overflow 生成的省略号位置不符合预期

Question

有一个表格，其中每行放置了一个图像和一个链接。我想让链接放在表格单元格的中间，另外，链接文本应该缩短以适应容器大小。

这是我的 HTML:

<div>
    <table >
        <tr>
            <td>
                <img src="http://placehold.it/40x40" alt="">
                <a href="">FreeBSD-10.1-RELEASE-amd64-disc1.iso
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <img src="http://placehold.it/40x40" alt="">
                <a href="">goagent-goagent-db0b5c0.tar.gz</a>
            </td>
        </tr>
    </table>
</div>

css如下:

div {
  border-style: solid; 
  border-color: #ff0000;
  width: 200px;
}

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;  
}

table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-style: solid; 
  border-color: #000000;      
}   

table a { 
  text-decoration:none;
  vertical-align: 50%;
  margin-left: 10px;
}   

然而，渲染结果并不是我所期望的:

我理想的结果是这样的，比如说，省略号应该和链接文本在同一行上:

那么如何解决这个问题呢？谢谢。

Answer 1

试试这个

table a{ 
  text-decoration:none;
  /*vertical-align: 50%;*/
  margin-left: 10px;
} 

table img{
 vertical-align: middle;
}

http://jsfiddle.net/mk9n1mcu/