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 - 如何垂直对齐文本和图像？

回答

相关问题