0

我正在尝试创建一个带有内部文本和图像作为链接的选项卡。我面临的问题是锚尺寸和/或定位似乎与图像不同。正如您在 jsfiddle 链接中看到的那样，图像底部和我的 div 底部之间有一些间距，我不知道为什么会这样。

JSFiddle 链接

如果您无法访问该链接，HTML 代码：

<div id="SapDataBtn">
    <a href="#">
        <img runat="server" src="http://i.cubeupload.com/Tm2tPF.png" />
    </a>
    <a href="#" id="SapBtnText">
        Data
    </a>
</div>

CSS：

#SapDataBtn {
  background-color: #c7ddf2;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  width: 90px;
}
#SapDataBtn a:link,
#SapDataBtn a:visited,
#SapDataBtn a:hover,
#SapDataBtn a:active {
  font-size: 15px;
  font-weight: bold;
  color: #19456e;
  text-decoration: none;
}
#SapDataBtn img {
  border-style: none;
}
4

3 回答 3

2

添加vertical-align:bottom;你的#SapDataBtn img，这应该可以解决问题:)

于 2013-02-18T14:07:43.103 回答
1

试试下面...它会帮助你...

#SapDataBtn img {
  border-style: none;
  vertical-align: middle;
}

小提琴：http: //jsfiddle.net/XLeGd/1/

于 2013-02-18T14:17:05.950 回答
0

也许这就是你要找的：

#SapBtnText {
    vertical-align: super;
}
于 2013-02-18T14:05:23.663 回答