Question

我使用以下HTML：

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

创建以下内容：

← Back

问题是，左箭头未在中间垂直对齐。它看起来处于较低的第3位。

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

更新：

我可以垂直调整/对齐它：

不修改我的HTML，
不使用图像？

Answer 1

箭头是一个简单的字符，所以它与其他字符对齐（是在“中间”，字体的创建者希望它在它的位置......也许这就是中间小写字符）。也许它使用另一种字体看起来不同，也许不是。如果你有一个固定的字体并且看起来很乱，你可以尝试使用:first-letter选择器（或用span或其他东西包裹箭头）将它向上移动1或2像素（{{ 1}}）。

另一种解决方案是使用图像，就像大多数网站一样（并且有many free icon sets - 我最喜欢的是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

有两种可能的答案。

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

Answer 6

你有一些选择： 1.在单词Back之前的span标记之间放置箭头，为此span对象添加id，然后在css文件中指定样式： padding-top 或 bottom 以及 vertical-align 或位置相对。 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 &larr; */
    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在代码上做了不同的事情。

CSS：垂直对齐文本？

7 个答案: