我正在一个个人网站上突出显示我在个人网站上的认证。使用图像的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;
}


最终结果给出了...

html - 如何获取文本以使其与网站上的图片对齐-LMLPHP

我想要的是所有图像都紧线且在适当位置有一个小的“ 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/

10-09 22:51