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：垂直對齊文本？

回答

相關問題