CSS對齊圖像旁邊的鏈接

這是我的jsfiddle。CSS對齊圖像旁邊的鏈接

鏈接「關注我們」位於Twitter圖標旁邊。我想要的是鏈接在圖像上垂直居中使用css如果可能，不帶內聯樣式。

我試過直接向<a>標籤添加一個類，然後調整邊距。這沒有用。

我試着直接向img標籤添加一個類，然後調整邊距。這沒有用。

我試圖再次調整填充而不是邊距這些事情。

這是甚至可能的方式，我建立了，或者我將不得不改變html ..或兩者？

任何建議，非常感謝！

來源

2012-08-13 imakeitpretty

這裏是一篇文章，如果IE給你一些麻煩 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – MimiEAM 2012-08-13 14:07:05

我會像float到左側，然後更改a標籤的line-height等同於圖像的高度（在這種情況下，19px）。要將線條高度僅限定在「關注我們」周圍的錨點上，只需向錨點添加一個類，如.follow。

HTML

<img src="imageURL.png" width="24px" height="19px"> 
<a href="#" class="follow"> Follow Us</a>

CSS

img { float: left; } 
.follow { line-height: 19px; }

JS Fiddle Example

來源

2012-08-13 13:49:40 JSW189

謝謝！這工作。 – imakeitpretty 2012-08-13 14:01:53

垂直對齊：中間整齊簡單，爲什麼不使用它？ – darma 2012-08-13 14:04:54

我發現'vertical-align'屬性對於某些瀏覽器非常有用，特別是對於IE。 – JSW189 2012-08-13 14:08:42

您可以在想要對齊的<a>和<img>上設置vertical-align:middle。

編輯：看到http://jsfiddle.net/Fn4vP/16/

來源

2012-08-13 13:49:12 darma

我認爲vertical-align是一個棄用的元素。 – imakeitpretty 2012-08-13 13:50:09

「align」作爲一個屬性被棄用是的，但不是所有的CSS屬性！ – darma 2012-08-13 13:55:37

我會用line-height，基本上，浮動圖像左，左浮動的鏈接，然後清除浮動在下一個<h3>標記上。這部分更改爲以下：

<!-- Dont forget to close your image tag. --> 
<img src="http://i46.tinypic.com/2ly6hc4.png" width="24px" height="19px"/> 
<a href="#" class="flw-link"> Follow Us</a> 
<!-- Added class .flw-link to Follow us link -->

現在在你的CSS：

/* Float the image and link to the left */ 
.twitter-feed img{float: left;} 
/* Set the line-height of the text to center vertically to the image */ 
.twitter-feed .flw-link{float: left; line-height: 21px;} 
/* Finally, clear your floats on the next tweet header */ 
.twitter-feed h3{clear: both;}

看看這個的jsfiddle：http://jsfiddle.net/Fn4vP/25/

我會做這樣和浮動兩種元素，因爲我必須選擇將行高改爲0，這會將文本置於頂部。然後，您可以使用行高來精確控制文本垂直放置的位置。

來源

2012-08-13 14:03:52 Anil

CSS對齊圖像旁邊的鏈接

回答

相關問題