垂直对齐不生效

Question

我不确定为什么我的“添加到收藏夹”文本不会与蓝色元素的中间对齐，这是我希望它做的。我在下面的两个课程中添加了vertical-align:middle。如果我删除蓝色字段内的fav.png图片，文本就会显示在红色虚线框的顶部。

CSS：

.favouriteLink
{
    border: 1px solid black;
    margin:3%;
    background-image: url('images/blueBanner.png');
    border-radius: 15px;
    height:40px;
    vertical-align:middle;
    text-align:center;

}

.favouriteLink a
{
    border: 1px dotted red;
    display:block;
    text-decoration:none;
    text-weight:bold;
    color:white;
    vertical-align:middle;
}

HTML：

<div class="favouriteLink">
    <a href="javascript:alert('test')"><img class="navImg" src="images/fav.png" />Add to Favourites</a>
</div>

编辑：

工作小提琴：http://jsfiddle.net/YcMgh/2/

出于某种原因，将建议的高度设置为40px会使文本居中，但只有在图像较小的情况下，这才是我最初没有注意到的原因。我对此有点困惑，因为如何更改图像位置会改变文本？文本字段是否与图像不分开？

例如...... 由于我的img为32px乘32px，因此发生了http://jsfiddle.net/YcMgh/3/

但是，如果我更改为25px：http://jsfiddle.net/YcMgh/4/

Answer 1

两件事：

1. 将line-height: 40px添加到您的.favouriteLink a规则中。我选择了它，因为它与您为按钮设置的height相匹配。

2. 添加规则.favouriteLink img {vertical-align: middle;}。如果这不是您想要的地方，请使用基于长度的偏移，例如vertical-align: -9px或其他类似的偏移。

Answer 2

忘记所有其他答案。您只需要正确对齐图像。它与基线的对齐将文本向下推。将它对齐顶部或文本顶部以解决此问题。

see Example-Fiddle here

您不需要在a或其容器上进行垂直对齐。根据您的图像高度/文字高度，您可能需要adjust the values。

Answer 3

我认为整个解决方案都可以简化。我认为将标记移动到CSS类更容易，而不是在标记中包含按钮的图像URL可能有几次。这样，您可以定义一个基本CSS类，它是一个没有图像的按钮，另一个类要添加到正确的背景图像中。

这种方法的其他好处是背景图像具有对齐属性，因此图像可以轻松地垂直对齐而不会有太多麻烦。

这种加价的一个例子如下：

HTML：

<a href="javascript:alert('test');" class="link favourite-link">
    <span>Add to Favourites</span>
</a>

CSS：

.link
{
    margin:5px;
    border:1px dashed #333;
    background:#ededed;
    border-radius: 15px;
    height:40px;
    vertical-align:middle;
    text-align:center;
    display:inline-block;
    line-height:40px;
    padding:0 7px;
    width:250px;
}
.favourite-link span {
    background:url("image/goes/here.png") no-repeat left center;
    display:inline-block;
    padding-left:20px /* equal to icon width */;
}

注意：如果您不要求文本位于中心，并且文本旁边有图标，则可以删除额外的span。

Answer 4

尝试将此规则添加到.favouriteLink：

display:table-cell;

这将触发您的浏览器以您可能期望的方式垂直对齐。

Answer 5

我只是喜欢使用我喜欢的line-height: 40px; // Your height of your div因为它更容易控制物品的高度！

Answer 6

尝试将此添加到您的CSS：

.favoriteLink * {
    vertical-align: middle;
}

要获得所需的结果，您需要在vertical-align内的所有元素上设置div。