Question

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

相同

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

以下是它的外观：

呈现页面的一部分：

生成的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>

垂直地，将图像居中放入表格行“

1 个答案: