我正在一个个人网站上突出显示我在个人网站上的认证。使用图像的ToS的一部分是在每个图像的右上角放置一个TM。我在使文本对齐所需位置时遇到麻烦。
这就是我所拥有的:
的HTML
<div id="imagesMain">
<img src="aplus.png"> TM
<img src="network.png"> TM
<img src="security.png"> TM
</div>
的CSS
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 100px;
width: auto;
vertical-align: middle;
}
最终结果给出了...
我想要的是所有图像都紧线且在适当位置有一个小的“ TM”。任何帮助,将不胜感激。
最佳答案
用span
包装图像,然后使用伪指令在右上角添加TM
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain span {
position: relative;
display: inline-block;
}
#imagesMain span::after {
content: 'TM';
position: absolute;
top: -4px;
right: -4px;
}
#imagesMain img {
height: 100px;
width: auto;
vertical-align: middle;
border-radius: 50%;
}
<div id="imagesMain">
<span><img src="http://placehold.it/100/f00"></span>
<span><img src="http://placehold.it/100/f00"></span>
<span><img src="http://placehold.it/100/f00"></span>
</div>
关于html - 如何获取文本以使其与网站上的图片对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44349249/