我如何将这些文字放在我的图像下方和边框内

Question

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

我希望它看起来像第二张图片

第一张图是现在的样子

Answer 1

如果没有图像包装器，您将无法做到这一点，因为 <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>

我如何将这些文字放在我的图像下方和边框内

how do i put these text under my images and inside the border

html

image

text