Question

我正在一个个人网站上工作，在个人网站上突出我的认证。使用图像的部分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”在适当的位置。任何帮助将不胜感激。

Answer 1

使用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>

Answer 2

以下是将徽标放在右上角的代码，在这里我使用了一些虚拟图像，您可以用图像替换它们。

＆＃13;

#imagesMain div{
  display:inline-block;
  position:relative;
}
#imagesMain div > p{
  position:absolute;
  top:-15px;
  right:0;
  color:#fff;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
<div id="imagesMain"> 
  <div>        <img src="http://lorempixel.com/100/100/food/1"> <p>TM</p></div>
<div>  <img src="http://lorempixel.com/100/100/food/2"> <p>TM</p></div>
<div>  <img src="http://lorempixel.com/100/100/food/3"> <p>TM</p></div>
    </div>
</body>
</html>

＆＃13;

Answer 3

您应该将图像和TM文本包装在DIV中，制作position: relative，将TM文本放入t span，然后使用position: absolute制作top: 0; right: 0;。有关详细信息，请参阅下面的我的代码段。

#imagesMain {
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  text-align: center;
}

#imagesMain img {
  height: 100px;
  width: auto;
}

#imagesMain div {
  display: inline-block;
  position: relative;
  height: 100px;
  width: auto;
  vertical-align: middle;
}

#imagesMain span {
  position: absolute;
  top: 0;
  right: 0;
}

<div id="imagesMain">
  <div><img src="aplus.png"><span class="x">TM</span></div>
  <div><img src="network.png"><span class="x">TM</span></div>
  <div><img src="security.png"><span class="x">TM</span></div>
</div>

如何让文本与网站上的图片对齐？

3 个答案: