代码之家 › 专栏 › 技术社区 › Stefan Kendall

将CSS背景图像与前面的元素居中?

background-image html-table button css html

Stefan Kendall · 技术社区 · 14 年前

我想用背景图像 <a>

HTML格式:

<table>
    <tr>
        <td>
           <select>
               <option>1</option>
                              <option>33</option>
                              <option>c</option>
                              <option>a</option>
                              <option>aaef</option>
            </select> 
            text
            <a href="#"></a>
        </td>
    </tr>
</table>

CSS:

a{
 background-image: url(http://stefankendall.com/files/excel.png);   
    width: 16px;
    height: 16px;
    display: inline-block;
}

2 回复 | 直到 7 年前

theazureshadow 14 年前

添加 vertical-align: middle; 对于基于标准的浏览器,锚元素的css将使其居中。你可能需要使用一些类似于本页的黑客来让它在IE6和IE7中工作: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

编辑: a img { vertical-align: middle; } 同样的效果(而且它应该跨浏览器工作,因为img已经是内联块)。理想情况下,背景图像应该只用于装饰,而按钮是实际内容。例如,如果某人没有启用css怎么办?图像标记允许 alt

Tom 14 年前

我认为你需要重新考虑一下方法。您的背景图像在 <a> 但这个元素与 <td>

你可以把文本和链接放在 <span> 例如,或将文本放在 <a> 别让它看起来像一个链接。您还可以使用定位和/或浮动将两者放置在一起。

推荐文章

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Laiqa Mohid · 反应-在使用SVG作为背景图像属性中的数据时,尝试将SVG填充颜色作为道具传递?

2 年前

user8076620 · javascript如何使用style属性查找包含背景图像的元素

6 年前

h2odev · 在具有动态宽度的div元素上调整背景图像

6 年前

Chris · 如何使用CSS缩放手机背景图像?

6 年前

Chris McCarthy · 如何在matplotlib雷达图中添加轮盘赌背景图像

6 年前

Fahim Parkar · UITextView背景图像正在滚动多行

7 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

7 年前

AlphaX · 如何交换透明背景图像

7 年前

TJ1 · 更改圆的背景图像

7 年前