編輯保證金：HTML/CSS

好了，所以我有它裏面的圖片文字，像這樣編輯保證金：HTML/CSS

<h1>First<img alt="image" src="../images/middle.png">Name</h1>

，現在，我不想文本是在圖像的中心（我知道我可以加入做垂直對齊的圖像），但我想要的文字爲圖像的大約3.5/4，所以不完全是在圖像的中間，但有點到圖像的底部。我決定嘗試爲圖像添加一個邊緣頂部，但隨後將圖像和h1向下移動。我然後嘗試

<h1 class="text">First</h1><img alt="image" src"../images/middle.png"><h1 class="text">Name</h1>

這使得第一個h1，圖像和第二個h1出現在不同的行上。然後我嘗試將h1顯示器在線顯示，但是我可以回到第一個問題，當我在圖像上創建邊緣頂部時，h1會隨着圖像一起下降。

那麼，如何使這是文本行內的圖像的任何想法改變它的垂直位置，同時不改變圖像周圍的文本的垂直位置？

來源

2013-10-06 user2817200

我能看到你的CSS迄今使用？ –

我玩耍，改變了我的CSS，嘗試一切從邊距的顯示：到垂直對齊的，然後RwwL的回答表明，我可以用像素（甚至負像素）垂直對齊和工作完全在線的。 – user2817200

您是否嘗試過全部不同的CSS垂直對齊值（基線，文本頂部，文本底部等），看看是否得到你想要的東西？

如果沒有，嘗試所有這些 - https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align - 和他們嘗試不同的組合與行高值設置你的H1元素。

來源

2013-10-06 01:28:20 RwwL

啊，完美，垂直對齊：-16px完美運作。我們如何定義像素的垂直對齊，甚至是否定值，這是非常好的。這非常方便。謝謝。 – user2817200

酷！如果這是針對某種CMS模板的，請確保負垂直對齊不會咬你，具體取決於元素中的單詞。我認爲當你使用這些信件時，可能會被切斷。 – RwwL

哦，男人，好點。是的，它是一個模板。好了，現在我要去繼續使用負的取向，但我需要找到一個更好的解決方案：/ – user2817200

這就是你要使用絕對定位爲<h1>文本的情況下，否則你不能有2個<h1>標籤在同一行 - 因爲你已經發現，嘗試像

<h1 class="text" class="txt1">First</h1><img alt="image" src"../images/middle.png"><h1 class="txt2">Name</h1> 

.txt1{ 
    position:absolute; 
    top:15px; 
} 
.txt2{ 
    position: absolute; 
    top: 15px; 
    left: 150px; 
}

東西很明顯，我不知道你的「middle.png」到底有多大，所以調整上邊和左邊的數字相應

來源

2013-10-06 01:29:40

對，這個解決方案也適用，我只是不想進入絕對定位，但是，這將是我不得不訴諸的。上面的解決方案也很棒。 – user2817200

編輯保證金：HTML/CSS

回答

相關問題