Question

我正在尝试创建一个包含内部文本和图像作为链接的选项卡。我面临的问题是锚尺寸和/或定位似乎与图像不同。正如你在jsfiddle链接中看到的那样，图像底部和div底部之间有一些间距，我无法弄清楚为什么会出现这种情况。

如果您无法访问该链接，请使用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;
}

Answer 1

在vertical-align:bottom;中添加#SapDataBtn img，这应该可以解决问题：）

Answer 2

尝试如下......它会帮助你......

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

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

Answer 3

也许这就是你要找的东西：

#SapBtnText {
    vertical-align: super;
}

锚点图像和文本高度不正确

3 个答案: