CSS：將文本與顯示內嵌塊的元素對齊

我有一個簡短的文本，我必須在其中添加一個鏈接。該鏈接不應該作爲文本而是作爲圖像可見。到目前爲止沒有問題，但要使用圖像我必須設置display:inline-block能夠設置標籤的寬度/高度。只要我這樣做，右邊的下一個在包含div中向下跳。我絕對無法向上移動。該代碼是：CSS：將文本與顯示內嵌塊的元素對齊

<div> 
    <p id="pid">Some prefixing text that shouldn't be at the bottom of the div but rather in the middle <a href="#" target="_blank">This is some link</a></p> 
</div> 

#pid { 
    border: 1px solid blue; 
    float: right; 
} 
#pid a { 
    display: inline-block; 
    width: 50px; 
    height: 53px; 
}

http://jsfiddle.net/DxVQr/1/

所以我怎麼可能向上移動的前綴文本？非常感謝！

來源

2013-10-03 Fygo

你說：「鏈接不應該作爲文本顯示，而應該作爲圖像顯示。」但你有文字？ – dezman

我有文本來演示我在說什麼。示例中不需要圖像，因爲它的行爲完全相同。 – Fygo

您可以將'inline-block'元素的'vertical-align'設置爲'middle'，以便它本身相對於相鄰的'inline'元素居中對齊：http://jsfiddle.net/DxVQr/2/鏈接類型因爲鏈接的「高度」設置太小，所以會被截斷。 – SombreErmine

<a>標籤能做這個工作嗎？

來源

2013-10-03 22:35:23

適用於緊急解決方案。有什麼辦法可以更精確地對齊它嗎？圖像將有一個陰影，所以文本將需要去約25％的圖像的高度。 – Fygo

那麼，我實際上可以設置垂直對齊的百分比，所以如果我將它設置爲負數，它應該使用技巧... – Fygo

然後用負邊距或「position：relative」拉出它。 –

CSS：將文本與顯示內嵌塊的元素對齊

回答

相關問題