CSS 内联显示的向上移动字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4876749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move up character displayed inline
提问by takeshin
I have the following markup for breadcrumbs menu:
我有以下面包屑菜单标记：
<div>
<span class="start-here">You are here:<span>
<a href="/">example.com</a>
<span class="raquo"> ? </span>
<a href="/news">News</a>
<span class="raquo"> ? </span>
Title
</div>
Is there a smart way to move those ?(.raquo) characters a few pixels up without absolute positioning when all of the elements are displayed inline? I want this character to be smaller than the others and to be displayed in the center of the line (or some pixels down/up).
当所有元素都内联显示时，是否有一种聪明的方法可以将这些?( .raquo) 字符向上移动几个像素而不进行绝对定位？我希望这个字符比其他字符小，并显示在线条的中心（或向下/向上一些像素）。
(I need it to work also for IE6 and up)
（我需要它也适用于 IE6 及更高版本）
采纳答案by Gunner
Not sure about IE6, but it seems like the following should get you close to what you want.
不确定 IE6，但似乎以下内容应该让您接近您想要的。
.raquo {
font-size: 10px;
vertical-align:middle;
}
Just make font-sizewhatever you need, vertical align should set it to the middle of the line-height.
只需制作font-size您需要的任何内容，垂直对齐应将其设置为line-height.
回答by sashn
.raquo {
position:relative;
top:-2px;
}
worked best for me
最适合我
回答by imnickvaughn
vertical-align: 3px
with any amount or unit.
任何金额或单位。
It is very powerful for things like custom fonts and other spans and elements that are incorrectly justified. I just used it on a font that I got from my designer.
对于自定义字体和其他跨度以及不正确对齐的元素等内容，它非常强大。我只是在我从设计师那里得到的字体上使用它。
回答by anothershrubery
You can use vertical-align:top; font-size:x-small;in CSS. It's hard to get perfectly in the middle though...
您可以vertical-align:top; font-size:x-small;在 CSS 中使用。虽然很难在中间完美地...
回答by clayRay
Building on @sashn's answer, if you want to future-proof it against future font size changes, I would do this...
以@sashn 的回答为基础，如果您想针对未来的字体大小更改对其进行未来验证，我会这样做...
.raquo {
position:relative;
top:-0.1em;
}
This way the position offset will automatically shrink or expand depending on font size.
这样，位置偏移量将根据字体大小自动缩小或扩大。
回答by Keltex
I hate to say this... but you could use a table. I've found it to be the only reliable way to make sure that everything is vertically centered in a line:
我不想这么说……但你可以使用table. 我发现它是确保所有东西都垂直居中在一条线上的唯一可靠方法：
<table>
<tr>
<td class="start-here">You are here:<td>
<td><a href="/">example.com</a></td>
<td class="raquo"> ? </td>
<td><a href="/news">News</a></td>
<td class="raquo"> ? </td>
<td>Title</td>
</tr>
</table>
