CSS - 如何垂直對齊文本和圖像？

在一個html文件中，我有一個顯示文本「PROTOCOL」和一個圖像的鏈接，如下所示。CSS - 如何垂直對齊文本和圖像？

<a href="#">PROTOCOL<span id="my-image"><img src="xxxxx"></img></span>

但該鏈接看起來很可怕 - 文本和圖像沒有垂直對齊。我需要在中間對齊它們，最好使用單獨的CSS文件。

這是我的source at Plunker，證明了這個問題。有人可以幫忙嗎？

非常感謝！

來源

2016-10-03 SamDevx

標記'img'沒有結束標記'' – Dave

@Dave''是一個自閉標記。它不需要結尾的''標籤。 –

我寫，沒有它..只有''這就是全部 – Dave

添加vertical-align: middle到款式的#my-image img：

#my-row{ 
 
    border:1px solid #ccc; 
 
    border-width:1px 0; 
 
    list-style:none; 
 
    padding:0; 
 
    text-align:center; 
 
    background-color: white; 
 
} 
 
#my-row a{ 
 
    display:inline-block; 
 
    padding:10px; 
 
    color: black;; 
 
    text-decoration:none; 
 
} 
 
#my-image img { 
 
    vertical-align: middle; 
 
}

<div> 
 
    <ul id="my-row">   
 
    <li> 
 
     <a href="#">PROTOCOL<span id="my-image"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMTQuMTAxLDQyLjMxNGMtMS44NywwLTMuNjI4LTAuNzI5LTQuOTUtMi4wNTFMNy43MzYsMzguODVjLTIuNzI5LTIuNzI5LTIuNzI5LTcuMTcxLDAtOS44OTlsOS4xOTItOS4xOTIgICAgIGMxLjMyMi0xLjMyMiwzLjA4LTIuMDUxLDQuOTUtMi4wNTFzMy42MjgsMC43MjksNC45NDksMi4wNTFsMS40MTQsMS40MTRjMC4zOTEsMC4zOTEsMC4zOTEsMS4wMjMsMCwxLjQxNHMtMS4wMjMsMC4zOTEtMS40MTQsMCAgICAgbC0xLjQxNC0xLjQxNGMtMC45NDQtMC45NDQtMi4yLTEuNDY1LTMuNTM1LTEuNDY1Yy0xLjMzNiwwLTIuNTkyLDAuNTIxLTMuNTM2LDEuNDY1TDkuMTUsMzAuMzY0ICAgICBjLTEuOTQ5LDEuOTQ5LTEuOTQ5LDUuMTIxLDAsNy4wNzFsMS40MTQsMS40MTRjMC45NDQsMC45NDQsMi4yLDEuNDY1LDMuNTM2LDEuNDY1YzEuMzM1LDAsMi41OTEtMC41MjEsMy41MzUtMS40NjVMMjQsMzIuNDg1ICAgICBjMC4zOTEtMC4zOTEsMS4wMjMtMC4zOTEsMS40MTQsMHMwLjM5MSwxLjAyMywwLDEuNDE0bC02LjM2NCw2LjM2NEMxNy43MjksNDEuNTg2LDE1Ljk3MSw0Mi4zMTQsMTQuMTAxLDQyLjMxNHoiLz48L2c+PGc+PHBhdGggZD0iTTI2LjEyMSwzMC4yOTNjLTEuODY5LDAtMy42MjgtMC43MjktNC45NDktMi4wNTFjLTAuMzkxLTAuMzkxLTAuMzkxLTEuMDIzLDAtMS40MTRzMS4wMjMtMC4zOTEsMS40MTQsMCAgICAgYzAuOTQ0LDAuOTQ0LDIuMiwxLjQ2NSwzLjUzNSwxLjQ2NWMxLjMzNiwwLDIuNTkyLTAuNTIxLDMuNTM2LTEuNDY1bDkuMTkyLTkuMTkyYzEuOTQ5LTEuOTQ5LDEuOTQ5LTUuMTIxLDAtNy4wN0wzNy40MzYsOS4xNSAgICAgYy0xLjk0OS0xLjk0OS01LjEyMi0xLjk0OS03LjA3MSwwTDI0LDE1LjUxNWMtMC4zOTEsMC4zOTEtMS4wMjMsMC4zOTEtMS40MTQsMHMtMC4zOTEtMS4wMjMsMC0xLjQxNGw2LjM2NC02LjM2NCAgICAgYzIuNzI5LTIuNzI5LDcuMTctMi43MjksOS44OTksMGwxLjQxNCwxLjQxNWMyLjcyOSwyLjcyOSwyLjcyOSw3LjE3LDAsOS44OThsLTkuMTkyLDkuMTkyICAgICBDMjkuNzUsMjkuNTY0LDI3Ljk5MSwzMC4yOTMsMjYuMTIxLDMwLjI5M3oiLz48L2c+PC9nPjwvZz48L3N2Zz4="></span></a> 
 
    </li> 
 
</ul> 
 
</div>

來源

2016-10-03 10:44:55

完美的作品！非常感謝。我試圖在＃my-image本身上「vertical-align：middle」而不用進一步指定「img」。 – SamDevx

@SamDevx歡迎您） –

使用柔性盒可以解決這個問題

#my-row{ 
 
\t border:1px solid #ccc; 
 
\t border-width:1px 0; 
 
\t list-style:none; 
 
\t padding:0; 
 
\t text-align:center; 
 
\t background-color: white; 
 
} 
 
#my-row a{ 
 
\t padding:10px; 
 
\t color: black;; 
 
\t text-decoration:none; 
 
     display: flex; 
 
     justify-content: center; 
 
     align-items: center; 
 
}

<div> 
 
     <ul id="my-row">   
 
      <li> 
 
       <a href="#">PROTOCOL<span id="my-image"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMTQuMTAxLDQyLjMxNGMtMS44NywwLTMuNjI4LTAuNzI5LTQuOTUtMi4wNTFMNy43MzYsMzguODVjLTIuNzI5LTIuNzI5LTIuNzI5LTcuMTcxLDAtOS44OTlsOS4xOTItOS4xOTIgICAgIGMxLjMyMi0xLjMyMiwzLjA4LTIuMDUxLDQuOTUtMi4wNTFzMy42MjgsMC43MjksNC45NDksMi4wNTFsMS40MTQsMS40MTRjMC4zOTEsMC4zOTEsMC4zOTEsMS4wMjMsMCwxLjQxNHMtMS4wMjMsMC4zOTEtMS40MTQsMCAgICAgbC0xLjQxNC0xLjQxNGMtMC45NDQtMC45NDQtMi4yLTEuNDY1LTMuNTM1LTEuNDY1Yy0xLjMzNiwwLTIuNTkyLDAuNTIxLTMuNTM2LDEuNDY1TDkuMTUsMzAuMzY0ICAgICBjLTEuOTQ5LDEuOTQ5LTEuOTQ5LDUuMTIxLDAsNy4wNzFsMS40MTQsMS40MTRjMC45NDQsMC45NDQsMi4yLDEuNDY1LDMuNTM2LDEuNDY1YzEuMzM1LDAsMi41OTEtMC41MjEsMy41MzUtMS40NjVMMjQsMzIuNDg1ICAgICBjMC4zOTEtMC4zOTEsMS4wMjMtMC4zOTEsMS40MTQsMHMwLjM5MSwxLjAyMywwLDEuNDE0bC02LjM2NCw2LjM2NEMxNy43MjksNDEuNTg2LDE1Ljk3MSw0Mi4zMTQsMTQuMTAxLDQyLjMxNHoiLz48L2c+PGc+PHBhdGggZD0iTTI2LjEyMSwzMC4yOTNjLTEuODY5LDAtMy42MjgtMC43MjktNC45NDktMi4wNTFjLTAuMzkxLTAuMzkxLTAuMzkxLTEuMDIzLDAtMS40MTRzMS4wMjMtMC4zOTEsMS40MTQsMCAgICAgYzAuOTQ0LDAuOTQ0LDIuMiwxLjQ2NSwzLjUzNSwxLjQ2NWMxLjMzNiwwLDIuNTkyLTAuNTIxLDMuNTM2LTEuNDY1bDkuMTkyLTkuMTkyYzEuOTQ5LTEuOTQ5LDEuOTQ5LTUuMTIxLDAtNy4wN0wzNy40MzYsOS4xNSAgICAgYy0xLjk0OS0xLjk0OS01LjEyMi0xLjk0OS03LjA3MSwwTDI0LDE1LjUxNWMtMC4zOTEsMC4zOTEtMS4wMjMsMC4zOTEtMS40MTQsMHMtMC4zOTEtMS4wMjMsMC0xLjQxNGw2LjM2NC02LjM2NCAgICAgYzIuNzI5LTIuNzI5LDcuMTctMi43MjksOS44OTksMGwxLjQxNCwxLjQxNWMyLjcyOSwyLjcyOSwyLjcyOSw3LjE3LDAsOS44OThsLTkuMTkyLDkuMTkyICAgICBDMjkuNzUsMjkuNTY0LDI3Ljk5MSwzMC4yOTMsMjYuMTIxLDMwLjI5M3oiLz48L2c+PC9nPjwvZz48L3N2Zz4="></img></span></a> 
 
      </li> 
 
     </ul> 
 
    </div>

來源

2016-10-03 11:03:24

感謝Santosh總有不止一種方法來給皮膚上的皮膚:)而且，如果你仔細檢查圖像，你的圖像就不會像上述穆罕默德的解決方案那樣居中對齊。我的猜測是，由「＃my-row a」指定的彈性框將文本和圖像視爲一個單元，因此您的解決方案可能會更加準確！上面有沒有使用彈性盒與@穆罕默德的簡單解決方案有什麼不同之處？ – SamDevx

如果您知道圖像的高度，則始終可以將伴隨文本的行高設置爲相同的值。這樣做與浮動您的圖像一起應該解決

來源

2016-10-03 14:53:11

嗨，感謝您的評論。我想保持圖像的高度。我只是想把圖像向上或向下對齊。 – SamDevx

CSS - 如何垂直對齊文本和圖像？

回答

相關問題