Question

有没有办法将“content”属性生成的图像元素作为“：before”选择器的一部分垂直对齐，旁边是相邻的内联文本？换句话说，我有

<a href="..." class="facebook">Share on Facebook</a>

由于我不想用仅与样式有关的不必要的IMG元素污染我的标记，我采用通过CSS在链接左侧添加一个小图标（除了它没有正确对齐，因此问题）：

a.facebook:before
{
     content: url(/style/facebook-logo.png);
}

我尝试添加一个“vertical-align：middle”（CSS中最难以理解的对齐概念之一，在我看来，就是非常属性），但它没有效果。徽标与文本基线对齐，我不想硬编码像素偏移，因为坦率地说文本大小因浏览器而异，等等。有没有解决方法呢？

感谢。

Answer 1

就个人而言，我会使用background-image：

HTML：

<a href="..." class="facebook">Share on Facebook</a>

CSS：

a.facebook
{
    background-image: url(/style/facebook-logo.png);
    background-position: TOP LEFT;
    background-repeat:NO-REPEAT;
    padding-left:20px; /* or whatever the width of facebook-logo.png is */
}

如果你真的嫁给了使用:before的想法，那么你可以使用定位：

a.facebook
{
    position:relative;
    top:0px;
    left:0px;
    padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
a.facebook:before
{
   content: url(/style/facebook-logo.png);
   position:absolute;
   top:0px;
   left:0px;
}

Answer 2

垂直对齐仅适用于表格单元格。你可以添加一个display：table-cell到“a.facebook”

Answer 3

我会在徽标的上方（或下方）添加一些透明像素，这对图像来说是最简单的。

否则你可以玩 line-height ，但我希望你好运，明白你在做什么......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Aligning generated content vertically</title>
    <style type="text/css" media="screen,projection">

a, a:before {
    /*display: inline-block;*/
}

a {
    vertical-align: super;
    line-height: 3;
    background-color: yellow;
    border-top: 1px solid darkred;
    border-bottom: 1px solid red;
}

a:before {
    vertical-align: bottom;
    line-height: 1;
    content: 'bottom  :';
}
    </style>
</head>
<body>
    <div>
        <p><a href="#">Share sth with people you didn't think they'd have access to it</a></p>
    </div>
</body>
</html>

您也可以取消注释display: inline-block;

Answer 4

行高和背景图片可以满足您的需求：

CSS：

a.share-on-facebook {
    background: url(facebook.png) no-repeat top left;
    line-height: 40px; /* height of facebook logo */
    padding-left: 40px; /* width of Facebook logo */
}

标记式：

<a class="share-on-facebook" href="...">Share on Facebook</a>

如何将内嵌图像与其后的内嵌文本垂直对齐？

4 个答案: