我如何將這些文本放在我的影像下方和邊框內-有解無憂

HTML

<div id="images">
        <img src="images/mekanik.jpg" alt="" class="img1">
        <img src="images/engine.jpg" alt="" class="img1" style="margin-left: 50px;">
        <span class="imgtxt">
            <h3>Its Not A Toy</h3>
            <h4> or maybe you are Elon Musk... and cars are your toys</h4>
        </span>
        <span class="imgtxt">
            <h3>Its Not A Toy</h3>
            <h4> or maybe you are Elon Musk... and cars are your toys</h4>
        </span>
       

    </div>


<style>
        .img1 {
            width:500px;
             display: inline-block;
             margin-left: auto;
             margin-right: auto;
             padding-bottom: 200px;
             border: 1px solid grey;

        }
   

        #images {
            text-align: center;

}
        

        .imgtxt {
            text-align: center;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            display: inline-block;
        }
        
        
    </style>

你們知道我該如何解決嗎謝謝

這是一些圖片

https://prnt.sc/6PDn-0znyv_A

https://prnt.sc/aXaMzGPi_ri3

我希望它看起來像第二張圖片

第一張照片是它目前的樣子

uj5u.com熱心網友回復：

如果沒有圍繞影像的包裝，您將無法做到這一點，因為 < img > 標簽僅嵌入影像并且不能包含任何內容。

因此您將按如下方式包裝內容。

 #images {
            display: flex;
            margin: 0 auto;
            max-width: 1180px;
        }

        .img-item {
            width: 32%;
            display: inline-block;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid grey;

        }
        .img-item img{
            width: 100%;
            height: 300px;
        }

        .imgtxt {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            display: inline-block;
            padding: 0 10px;
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <div id="images">
        <div class="img-item">        
            <img src="https://via.placeholder.com/150" alt="">
            <span class="imgtxt">
                <h3>Its Not A Toy</h3>
                <h4> or maybe you are Elon Musk... and cars are your toys</h4>
            </span>
        </div>
        <div class="img-item">        
            <img src="https://via.placeholder.com/150" alt="">
            <span class="imgtxt">
                <h3>Its Not A Toy</h3>
                <h4> or maybe you are Elon Musk... and cars are your toys</h4>
            </span>
        </div>
        <div class="img-item">        
            <img src="https://via.placeholder.com/150" alt="">
            <span class="imgtxt">
                <h3>Its Not A Toy</h3>
                <h4> or maybe you are Elon Musk... and cars are your toys</h4>
            </span>
        </div>
    </div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446924.html

標籤：html 图片文本

上一篇：在底部影像中找到最大黑色像素數的最小平面。找到頂部影像的黑色像素的峰值

下一篇：使用OpenCV查找多邊形的交點