Html CSS：垂直对齐文本？

我正在使用以下HTML：

<p><a href="http://www.example.com/">&larr; Back</a></p>

要创建以下内容：

问题是，左箭头不是在中间垂直对齐。它似乎位于第三个较低的位置

<强>问题< /强>：如何使用CSS？

使左边箭头垂直地排列在字母（b）的中间？

---

更新：

我是否可以垂直调整/对齐：

不修改我的HTML，并且

不使用图像

---

一般来说，你不应该这样做，你应该让它的字体是由作者构思的

但如果你想改变它，你可以这样做：

<p><a href="http://www.example.com/">
    <span style="position:relative;top:-3px;">&larr;</span> 
    Back
</a></p>

---

注意：使用您需要的内容而不是

-3px

，我使用它只是为了说明如何更改位置。

您可以将箭头包装在SPAN标记中，然后使用行高和垂直对齐CSS属性。

箭头是一个简单的字符，因此它与其他字符一样对齐（它位于“中间”），字体的创建者希望它位于原处……也许这是小写字符的中间部分）。也许用另一种字体看起来不一样，也许不是。如果您有一个固定字体，而这个字体看起来很凌乱，您可以尝试使用选择器（或将箭头用

span

或其他方式包装）将其上移1或2像素（

位置：相对：顶部：-2px；

）

---

另一个解决方案是使用图像，就像大多数网站一样（我最喜欢的是有图像）

我认为你必须使用图像作为左箭头，而不是

&larr

可以将

&larr

放在单独的

span

中，使用特定的填充将箭头置于正确的位置，或者使用箭头位于中心的特定字体，但这会产生副作用

---

我建议您使用图像。

有两种可能的答案

按照您的书写方式，这不是一个图形元素（箭头）后跟一个标签（“Back”），而是一行文本（在段落内部），包含一个字符，后跟一个字母字符串。所以对齐是一个纯粹的印刷问题，由你选择的字体决定。选择一种不同的字体，看看它是否在排版上更美观

您真正想要的不是一行文本，而是两个可独立放置的图形元素。把每一个都放在自己的

span

内，给它

显示：内联块

和

位置：相对

，玩垂直填充、边距和线高，直到你满意为止

您有一些选择： 1.将箭头放在单词Back之前的span标记之间，向该span对象添加一个id，然后在css文件中指定样式，使用：填充顶部或底部，以及垂直对齐或相对位置。 2.第二个选项是使用图像作为背景，然后必须为此链接创建样式：

  li a#link,#link_conten{
      background-image: url(../../../img/arrow.gif);
      background-position: left top;
      background-repeat: no-repeat;
     }

---

此外，仅将链接（标记a）放在段落（标记p）内并不常见（从语义角度来看）。然后，您必须处理标记a和p的默认css规则，但当然，根据您的设计，您可以使用css生成的内容。这将意味着编辑您的HTML-删除箭头。本质上，您正在创建一个位于链接前面的伪元素，您可以根据自己的喜好对其进行样式设置，例如

a.back:before {
    content: "\2190 "; /* Unicode equivalent of ← */
    display: inline-block;
    padding: 5px;
    background-color: aqua;
}  

缺点是，这在IE6或IE7中不起作用。您可以使用一些有针对性的javascript来解决这个问题

如果您不想编辑HTML，可以尝试一下

：第一个字母。它只适用于块级元素，因此您需要相应地工作，例如

a.back {
    display: inline-block;
}
a.back:first-letter {
    background-color: aqua;
    padding: 5px;
}

不过，我很难让它跨浏览器一致地显示。IE8和FF3.6在代码方面做了相当不同的事情。
我喜欢Fam:D我还建议使用图标或图形。看起来更为优雅：你是否能够让第一个字母开始工作，因为我没有。对于你的更新：是的，是的，就像我在回答中所说的：使用：第一个字母选择器。我尝试在Firefox中使用：第一个字母选择器，但它似乎不起作用，这就是为什么我更新了postAh。似乎
：第一个字母
仅适用于块级元素。