我試圖在圖片下方放置一個鏈接，無論出于何種原因，該鏈接一直位于圖片的側面（右側）。影像顯示正常并且鏈接有效，但我只需要它在圖片下方。
有任何想法嗎？
HTML：
<div class = "images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<a class="link1" href = "https://www.google.com" >Test </a>
</div>
CSS：
.images {
position: absolute; left:10px; top: 200px;
font-size: 120%;
}
我是 HTML/CSS 的新手，所以如果有人能用簡單的術語解釋，我將不勝感激。我嘗試了很多不同的東西，例如跨度、對齊等，但它不起作用！
如果我使用 ap 陳述句而不是 ULR (h ref) 文本確實在影像下方，所以我很困惑！
uj5u.com熱心網友回復：
影像默認為行內元素 8，但被視為inline-block)。您需要做的就是將影像設定為塊級元素：img { display: block; }
img {
display: block;
}<div class="images">
<img src="https://via.placeholder.com/100.jpg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test </a>
</div>uj5u.com熱心網友回復：
您可以使用 display flex 使其成為一列。說明：https : //www.w3schools.com/css/css3_flexbox_container.asp
.images {
position: absolute;
left: 10px;
top: 200px;
font-size: 120%;
display: flex;
flex-direction: column;
}<div class="images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test </a>
</div>uj5u.com熱心網友回復：
您可以在影像標記下方添加中斷線標記。
<div class = "images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<br>
<a class="link1" href = "https://www.google.com" >Test </a>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/322355.html
下一篇：用漸變填充SVG