我使用下面的HTML:CSS:垂直對齊文本?
<p><a href="http://www.example.com/">← Back</a></p>
要創建以下文件:
問題是,左箭頭不是垂直中間對齊。看起來是在3號的較低位置。
問題:如何讓左箭頭在使用CSS的中間垂直對齊(字母「B」)?
UPDATE:
是否有可能對我來說,垂直方向上調整/對齊這樣的:
- 沒有改變我的HTML和
- 不使用的圖像?
我使用下面的HTML:CSS:垂直對齊文本?
<p><a href="http://www.example.com/">← Back</a></p>
要創建以下文件:
問題是,左箭頭不是垂直中間對齊。看起來是在3號的較低位置。
問題:如何讓左箭頭在使用CSS的中間垂直對齊(字母「B」)?
UPDATE:
是否有可能對我來說,垂直方向上調整/對齊這樣的:
通常你不應該這樣做,你應該讓它作爲字體被其作者構思。
但你想改變它,你可以做這樣的:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
注意:使用你所需要的,而不是-3px
,我用只是爲了說明位置如何可以改變的。
您可以將您的箭頭包裹在SPAN標記中,然後播放行高和垂直對齊CSS屬性。
的箭頭是一個簡單的人物,所以它像其他人(這是在「中間」排列,字體的創建者希望它是它在哪裏......也許這是較低的中間案例字符)。也許它看起來不同使用另一種字體,也許不是。如果你有一個固定的字體,看起來很雜亂,你可以嘗試使用:first-letter選擇器(或將箭頭包裝在span
或其他東西中)將其向上移動1或2 px(position:relative: top:-2px;
)。
另一種解決方案是使用圖像對於這一點,最喜歡的網站做的(也有many free icon sets在那裏 - 我最喜歡的是famfamfam)
我喜歡famfamfam:D我也建議使用圖標或圖形。看起來更精美:D – 2010-10-12 07:53:57
你能夠得到**第一個字母**的工作,因爲我沒有。 – Jason 2010-10-12 08:11:08
我認爲你必須使用一個圖像比&larr
左箭頭。
它可能有一個單獨的span
&larr
,有一些特定的填充到帶來的箭頭到正確的位置,或使用一個特定的字體,在中心的箭頭,但這將有副作用。
我建議你使用一個圖像。
有兩種可能的答案。
span
之內,給它display: inline-block
和position: relative
,並用垂直填充,邊距和線條高度玩,直到你滿意爲止。你有一些選擇: 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規則,但當然取決於你的設計
你可以使用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與代碼做了很多不同的事情。
到您的更新:是的,就像我發佈在我的答案:使用:第一個字母選擇器。 – oezi 2010-10-12 08:03:58
我嘗試使用:與Firefox的第一個字母選擇器,它並沒有出現工作,這是我爲什麼更新後 – Jason 2010-10-12 08:05:03
啊。看起來':first-letter'只適用於塊級元素。 – 2010-10-12 10:52:04