CSS只在圖片和文字超鏈接

我有一個看起來像這樣的例子jQuery的菜單項修改文本）而不會影響img。有很多菜單項，所以文本會根據搜索結果而改變。CSS只在圖片和文字超鏈接

我不能輕易修改jQuery代碼，所以我希望有一個CSS唯一的解決方案？

正如你大概猜測的那樣，鱷魚黑色擠在圖像上，我只是想添加一些左填充和底部填充以使它更多一些。

任何幫助總是讚賞。謝謝。

2014-07-20 SumNone

爲什麼不把你的邊距或填充添加到你可以用CSS選擇的？ – cdonner

我想提到，作爲最壞的情況，但忘記了。文本位於圖像的底部，可能是文本的兩倍...所以它看起來有點不好。但是，如果這是我唯一的選擇，我肯定會添加保證金。謝謝。 ...另外，我已經嘗試了文本對齊方式，它似乎沒有影響任何東西......所以，如果我能得到這個邊緣的工作......這將是完全可以接受的。 – SumNone

您也可以使用負邊距。 – cdonner

您可以嘗試修改圖像風格，以達到您想要的結果：

.ui-menu-item img { 
    margin-right: 1em; // To space it out 

    display: inline-block; 
    vertical-align: middle; 
}

玩的vertical-align值的方式，使文字看起來爲中心的圖像位置。您還可以將vertical-align與margin-top和margin-bottom結合使用以獲得更好的控制。

當然，如果文本跨越多行，這可能無法正常工作。

來源

2014-07-20 03:49:11

抱歉，延遲響應。我的託管服務提供商正是在那個時候升級網絡......無論如何，這很好。垂直對齊就是我在上面評論中的意思，它不影響任何東西（儘管我嘗試了文本對齊以及其他一些東西）。我想垂直對齊需要顯示屬性？我需要更好地掌握顯示屬性，因爲我只是使用內聯flex來修復對齊問題，我不明白它爲什麼起作用。我敢打賭，這個解決方案也能解決這個問題......非常感謝！ – SumNone

垂直對齊是最古怪的CSS屬性之一。如果我沒有弄錯，它只適用於內聯塊項目和表格單元，它們意味着不同的事情。 [本文很好地描述了它。]（http://css-tricks.com/almanac/properties/v/vertical-align/）。如果你能夠使用flexbox，那麼我會建議使用它，因爲它更強大。 –

非常好，我看過flexbox代碼，但還沒有真正掌握底層機制。我一定會檢查出來以及那個鏈接。再次感謝！ – SumNone

CSS只在圖片和文字超鏈接

回答

相關問題