html - 垂直对齐带有图标的文本

Question

我有一个如下文本在图标中间没有垂直对齐。

请问我该如何解决？

对齐顶部 http://www.kerrydeaf.com/ali.png

CSS：

#text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}

HTML：

<div class="blurb"><button class="blue_small" id="blue_small"></button> Available in video.</div>

更新：

这应该解释一下。

对齐顶部 http://www.kerrydeaf.com/ali2.png

Answer 1

您应该使用CSS 背景图像并用于padding-left:移动文本，并用于background-position:调整图像的位置。如果是链接，请使用 A 标记，而不是按钮。

<a href="..." class="videoBlurb">Available in video.</a>

无需像您一样嵌套标签。

就像是：

.videoBlurb {
    display:block;
    background-image:url(....);
    background-repeat:no-repeat;
    background-position:0px 0px;
    padding-left:40px;
    padding-top:20px;
    color:#48c4d2;
    font-size:15px;
    font-family:opensansitalic;
}

Answer 2

Diodeus 提出了一个很好的观点，并且肯定有最有用的答案，但是为了好奇而不改变你的标记 - 它实际上应该是这样简单的：

​button {
    vertical-align:middle;
}

当然，选择器更具体。演示：http: //jsfiddle.net/beV7j/2