html - 垂直，将图像居中放置在表格行中''

Question

我需要在 HTML 表格行中居中放置背景图像，图像<tr>的大小为 40 像素高度和 10 像素宽度。另外我需要在背景图像周围加上一个边框，与border:2px solid #cccccc;

HTML 是从 Javascript 生成的，因此必须在 CSS 中进行更改。

这是它的外观：

渲染部分页面：

http://snag.gy/4EYin.jpg

生成的 HTML：

<table cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
        <td align="left" style="vertical-align: top;">
            <ul class="mystyle">
                <li>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td align="left" style="vertical-align: top;">
            <ul class="mystyle" style="padding-top: 0px; padding-bottom: 0px;">
                <li>
                </li>
            </ul>
        </td>
    </tr>
    </tbody>
</table> 

CSS：

.mystyle {
    border:2px solid #cccccc;
    background: url(../images/bar.png) no-repeat center left;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe732', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
    width: 247px;       
}

更新：

当前图像几乎不错，只是顶部和底部有一些不需要的“空格”。

Answer 1

<style>
.mystyle {
    border:2px solid #cccccc;
    background: url(bar.png) no-repeat center left;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe732', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
    width: 247px; 
    background-position:center;      
}
</style>