web-dev-qa-db-ja.com

インラインで表示されている文字を上に移動

ブレッドクラムメニューに次のマークアップがあります。

<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>

それらを移動するスマートな方法はありますか›（.raquo）すべての要素がインラインで表示されている場合、絶対配置を行わずに数ピクセル上に文字を配置しますか？この文字を他の文字よりも小さくし、線の中央に表示する（または一部のピクセルを上下に移動する）ようにします。

（IE6以降でも機能する必要があります）

csslayoutpositioning
30
takeshin

IE6についてはわかりませんが、次のようにすると、希望するものに近づくはずです。

.raquo {
  font-size: 10px;
  vertical-align:middle; 
}

必要なものをfont-sizeにするだけで、垂直方向の位置合わせによってline-heightの中央に設定されます。

5
Gunner
.raquo {
    position:relative;
    top:-2px;
}

私にとって最もよく働いた

54
sashn
vertical-align: 3px

任意の量または単位で。

これは、カスタムフォントやその他のスパンや要素など、正しく位置合わせされていないものに対して非常に強力です。私はデザイナーから入手したフォントで使用しました。

4
imnickvaughn

CSSではvertical-align:top; font-size:x-small;を使用できます。真ん中を完全に切るのは難しいけど...

1
anothershrubery