CSS：垂直对齐文本？

我使用下面的HTML：CSS：垂直对齐文本？

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

要创建以下文件：

← Back

问题是，左箭头不是垂直中间对齐。看起来是在3号的较低位置。

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

UPDATE：

是否有可能对我来说，垂直方向上调整/对齐这样的：

没有改变我的HTML和
不使用的图像？

来源

2010-10-12 Jason

到您的更新：是的，就像我发布在我的答案：使用：第一个字母选择器。 – oezi 2010-10-12 08:03:58

我尝试使用：与Firefox的第一个字母选择器，它并没有出现工作，这是我为什么更新后 – Jason 2010-10-12 08:05:03

啊。看起来'：first-letter'只适用于块级元素。 – 2010-10-12 10:52:04

通常你不应该这样做，你应该让它作为字体被其作者构思。

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

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

注意：使用你所需要的，而不是-3px，我用只是为了说明位置如何可以改变的。

来源

2010-10-12 07:51:35

您可以将您的箭头包裹在SPAN标记中，然后播放行高和垂直对齐CSS属性。

来源

2010-10-12 07:51:44

的箭头是一个简单的人物，所以它像其他人（这是在“中间”排列，字体的创建者希望它是它在哪里......也许这是较低的中间案例字符）。也许它看起来不同使用另一种字体，也许不是。如果你有一个固定的字体，看起来很杂乱，你可以尝试使用:first-letter选择器（或将箭头包装在span或其他东西中）将其向上移动1或2 px（position:relative: top:-2px;）。

另一种解决方案是使用图像对于这一点，最喜欢的网站做的（也有many free icon sets在那里 - 我最喜欢的是famfamfam）

来源

2010-10-12 07:52:00 oezi

我喜欢famfamfam：D我也建议使用图标或图形。看起来更精美：D – 2010-10-12 07:53:57

你能够得到**第一个字母**的工作，因为我没有。 – Jason 2010-10-12 08:11:08

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

我建议你使用一个图像。

来源

2010-10-12 07:52:02 Nivas

有两种可能的答案。

你写它的方式，这是不包含单个字符后跟一个标签（“返回”）的图形元素（箭头），但文字的线（段内），后跟一个字母串。所以对齐是纯粹的印刷问题，并由您选择的字体决定。选择不同的字体，看看它是否更具印刷愉悦性。
你想要的真的是而不是一行文字，但有两个可独立放置的图形元素。把它们分别放在span之内，给它display: inline-block和position: relative，并用垂直填充，边距和线条高度玩，直到你满意为止。

来源

2010-10-12 07:53:59 chryss

你有一些选择： 1.将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规则，但当然取决于你的设计

来源

2010-10-12 08:21:52

你可以使用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与代码做了很多不同的事情。

来源

2010-10-12 10:46:13

CSS：垂直对齐文本？

回答

相关问题