如何獲取文字以對齊網站上的圖片

我正在致力於在個人網站上突出顯示個人認證的個人網站。使用圖像的部分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」。任何幫助，將不勝感激。

來源

2017-06-03 RLuck

包裝每個圖像轉換成單獨的div然後使該div位置相對，並在該p標籤之後放置tm使該p pos ition絕對，然後你可以將它移動到頂部：0右：0使它出現在右上角。 –

請回顧並評論我的答案，並讓我知道如果有什麼不清楚或缺失。如果你能接受最能幫助你的答案，那也將是一件好事。 – LGSon

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

來源

2017-06-03 23:18:27 LGSon

下面是將把徽標放在右上角的代碼，在這裏我使用了一些虛擬圖像，您可以用圖像替換它們。

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

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

來源

2017-06-03 23:06:53

你應該換圖像和TM-文本在DIV，使該position: relative，把TM-文本入T跨度，使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>

來源

2017-06-03 23:09:56 Johannes

如何獲取文字以對齊網站上的圖片

回答

相關問題