定位鏈接內的圖像

我有一些標記沒有太大的靈活性。它包含一個簡單的鏈接和一個內部的圖像。我試圖使用CSS來讓圖像顯示在文本下方。但是，我能做到這一點的唯一方法就是絕對定位。我認爲還有另一種方式可以做到這一點，而不必訴諸於此。有任何想法嗎？此外，我試圖讓圖像顯示在文本的右側。我可以通過將圖像浮動到右側來完成此操作，但圖像一直顯示在容器的右側。有誰知道我怎樣才能讓圖像出現在文本旁邊？我真的沒有在鏈接文本週圍添加span標籤的靈活性。定位鏈接內的圖像

a img{ position: absolute; top:30px }

<a href="#"> 
 
    <img src="http://placehold.it/350x150」> 
 
    Enter Header 
 
</a>

來源

2014-10-06 Delmon Young

不使用position，你在你的問題中提到，並且讓你可以把圖像相同的HTML右胸文本：

看到下面的代碼片段：

a { 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 
a img { 
 
    float: right; 
 
    margin-left: 10px; 
 
}

<a href="#"> 
 
    <img src="http://placehold.it/150x100" />Enter Header 
 
</a>

UPDATE基於OP問題的評論這裏是如何把文本放在圖像上方。

謝謝，當我想要圖片上方的文字的情況下，實例呢？

與OP的討論之後，有可能使用畢竟position。

a { 
 
    position: relative; 
 
} 
 
a img { 
 
    position: absolute; 
 
    top: 25px 
 
}

<a href="#"> 
 
    <img src="http://placehold.it/150x100" />Enter Header 
 
</a>

來源

2014-10-06 17:24:27 dippas

感謝您的答覆，但我沒有靈活性至於移動HTML或周圍的文本添加跨度標籤，所以這真的不行。 – 2014-10-06 17:26:34

好吧，我誤解了你的問題，讓我重做我的答案 – dippas 2014-10-06 17:28:03

更新的答案.. – dippas 2014-10-06 17:31:11

嘗試使用CSS顯示塊。

http://jsfiddle.net/nt44h5r5/15/

a img { 

}

要正確使用float，你需要有在一組寬度的容器（DIV）。我相信這就是你要找的東西（jsfidd鏈接）。

來源

2014-10-06 17:27:06 user3267755

另外..top：30px對CSS沒有任何意義。如果您想要保證金最高，請使用margin-top：30px;在代碼中使用它並看看。 – user3267755 2014-10-06 17:28:30

奇怪。它現在顯示，對不起！ – user3267755 2014-10-06 17:30:51

這不回答OP的問題。 – dippas 2014-10-06 17:36:22

嘗試設置一個爲塊，並且相對：

a { display: block; position: relative }

來源

2014-10-06 17:29:03 coopersita

這應該工作：

a img { 
    display:inline-block; 
    vertical-align:middle; 
    float:right; 
} 
a { 
    display:inline-block; 
    line-height:150px; (or any height of the image) 
}

小提琴：http://jsfiddle.net/Monteduro/nt44h5r5/14/

來源

2014-10-06 17:33:15 Monte

謝謝，當我想要圖像上方的文字時，情況如何？ – 2014-10-06 17:46:00

如果您無法將任何跨度或div添加到鏈接的文本中，則沒有簡單的解決方案。您可以使用絕對位置，或者您可以使用js簡單代碼來分析每個a，並將img與文本進行反轉。就像這樣：http://jsfiddle.net/Monteduro/nt44h5r5/16/ – Monte 2014-10-06 18:15:18

定位鏈接內的圖像

回答

相關問題