Question

在一个html文件中，我有一个链接显示文本＆＃34; PROTOCOL＆＃34;和图像如下。

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

但链接看起来很糟糕 - 文本和图像没有垂直对齐。我需要在中间对齐它们，最好使用单独的CSS文件。

这是我的source at Plunker证明了这个问题。有人可以帮忙吗？

非常感谢！

Answer 1

将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>

Answer 2

使用弹性盒可以解决这个问题

#my-row{
	border:1px solid #ccc;
	border-width:1px 0;
	list-style:none;
	padding:0;
	text-align:center;
	background-color: white;
}
#my-row a{
	padding:10px;
	color: black;;
	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>

Answer 3

如果您知道图像的高度，则始终可以将伴随文本的行高设置为相同的值。这样做以及将图像向右浮动应解决

CSS - 如何垂直对齐文本和图像？

3 个答案: