我如何 position 文字下圖
[英]How do i position text below image
問題描述
我是 CSS 和 HTML 的新手，在圖像下方定位文本時遇到了一點問題。
正如您在下面看到的，文本位於圖像的一側，我不知道如何修復它。
這是我的代碼：
.section1 { display: flex; align-items: stretch; flex-wrap: nowrap; margin: 25px; /* background-color: #000; */ height: auto; justify-content: space-evenly; list-style-type: none; overflow: hidden; }.section1 img { width: 20%; object-fit: ; } imagetextlink { position: absolute; }
<div class="section1"> <img src="https://via.placeholder.com/500" alt="test pic"> <a class="Imagetextlink">Testtext</a> <img src="https://via.placeholder.com/500" alt="test pic"> <img src="https://via.placeholder.com/500" alt="test pic"> <img src="https://via.placeholder.com/500" alt="test pic"> </div>
4 個解決方案
解決方案1
0 2021-02-19 19:34:45
沒有更多的代碼，很難說。 向元素添加結構是關鍵，然后使用 display 屬性從那里進行調整。
解決方案2
0 2021-03-09 18:09:32
嘗試這個：
<html> <head> </head> <body> <image src="https://ibb.co/Mn5cc5K"> <br/> <p> Texest </p> </body> </html>
使用<br/>標簽將文本 Go 置於圖像下方。
解決方案3
0 2021-03-09 18:32:04
這就是我所做的。
.section1 { display: flex; flex-wrap: nowrap; margin: 25px; /* background-color: #000; */ height: auto; justify-content: space-evenly; list-style-type: none; overflow: hidden; }.img-container { display:flex; flex-direction: column; }.section1 img { width:80px; /* change according to your need */ height:80px; /* change according to your need */ object-fit: ; }
<div class="section1"> <div class="img-container"> <img src="https://via.placeholder.com/500" alt="test pic"> <a class="Imagetextlink">Testtext</a> </div> <img src="https://via.placeholder.com/500" alt="test pic"> <img src="https://via.placeholder.com/500" alt="test pic"> <img src="https://via.placeholder.com/500" alt="test pic"> </div>
解決方案4
0 2021-03-09 20:05:14
<a class="Imagetextlink">Testtext</a>
imagetextlink { position: absolute; }
這里的問題是，你是
- 使用 class 名稱 imagetextlink 在
imagetextlink中以大寫字母I開頭，而在 CSS 選擇器中以小寫字母i開頭 - 你忘了放一個點
.在 CSS 選擇器中的 class 名稱前面。 現在，您正在選擇標簽名稱為ìmagetextlink的 HTML 元素，而不是class 名稱為imagetextlink的 HTML 元素。 點將解決此問題； 在 W3Schools 上閱讀更多相關信息。
.section1 { display: flex; align-items: stretch; flex-wrap: nowrap; margin: 25px; /* background-color: #000; */ height: auto; justify-content: space-evenly; list-style-type: none; overflow: hidden; }.section1 img { width: 20%; object-fit: ; }.imagetextlink { position: absolute; }
<div class="section1"> <img src="https://via.placeholder.com/500" alt="test pic"> <a class="imagetextlink">Testtext</a> <img src="https://via.placeholder.com/500" alt="test pic"> <img src="https://via.placeholder.com/500" alt="test pic"> <img src="https://via.placeholder.com/500" alt="test pic"> </div>
如何復制代碼塊以使其僅顯示在圖像的保留位置下方
[英]How do I replicate block of code to appear below only reserved position for image
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.