Question

我的文字如下所示，图标中间没有垂直对齐。

我该如何解决这个问题？

align top 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>

更新：

这应该解释一下。

align top 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

垂直对齐文本与图标

2 个答案: