CSS：垂直对齐文本？

Question

我使用以下HTML：

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

要创建以下内容：

←返回

问题是，左箭头没有在中间垂直对齐。 它似乎处于较低的第3位。

问题 ：如何使用CSS使左箭头在中间（字母“B”）垂直对齐？

---

更新 ：

我可以垂直调整/对齐这个：

1. 不修改我的HTML，和
2. 没有使用图像？

Answer 1

箭头是一个简单的人物，所以它的人（这是在“中间”，字体的创建者希望它是它在哪里......也许这是小写字符的中间）像对齐。 也许它使用另一种字体看起来不同，也许不是。 如果你有一个固定的字体而且看起来很乱，你可以尝试使用：第一个字母选择器（或在一个span或其他东西中包裹箭头）将它向上移动1或2像素（ position:relative: top:-2px; ）。

另一种解决方案是使用图像，就像大多数网站一样（并且有许多免费图标集 - 我最喜欢的是famfamfam ）

Answer 2

您可以将箭头包装在SPAN标记中，然后使用line-height和vertical-align CSS属性进行播放。

Answer 3

一般情况下你不应该这样做，你应该让它作为字体是由作者构思的。

但是你要改变它你可以这样做：

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

注意：使用你需要的而不是-3px ，我用它来说明如何改变位置。

Answer 4

我认为你必须使用一个图像比左箭头&larr 。
可以将&larr放在一个单独的span ，使用一些特定的填充将箭头移到正确的位置 ，或者使用在中心有箭头的特定字体，但这会产生副作用。

我建议你使用一个图像。

Answer 5

这有两种可能的答案。

1. 你写它的方式，这不是一个图形元素（箭头）后跟一个标签（“后面”），而是一行文字（在一个段落内），包含一个字符后跟一个字母字符串。 对齐是一个纯粹的排版问题，并由您选择的字体决定。 选择一种不同的字体，看它是否更符合印象。
2. 你想要的实际上不是一行文字而是两个可独立放置的图形元素。 将每个放在自己的span ，给它display: inline-block和position: relative并使用垂直填充，边距和线高，直到您满意为止。

Answer 6

您有一些选项：1。在单词Back之前的span标签之间放置箭头，向此span对象添加id，然后在css文件中指定样式： padding-top或bottom以及vertical-align或position relative 。 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规则，但当然取决于你的设计

Answer 7

您可以使用CSS生成的内容。 这将意味着编辑您的HTML - 删除箭头。 基本上你是在创建一个位于链接前面的伪元素，你可以随意设置它，例如

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

在缺点方面，这在IE 6或7中不起作用。您可以通过一些有针对性的JavaScript来解决这个问题。

如果您不想编辑HTML，可以尝试:first-letter 。 它只适用于块级元素，因此您需要相应地工作，例如

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

我很难让它一直显示跨浏览器。 IE8和FF3.6对代码做了不同的事情。