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

HTML

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

do you guys know how i can fix it please thanks

here are some images

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

https://prnt.sc/aXaMzGPi_ri3

i want it to look like the second picture

the first picture is how it currently looks

CodePudding user response：

You can't do it without a wrapper around the images, as <img> tag only embed an image and can't contain any content.

so you will wrap the content as below.

 #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 >        
            <img src="https://via.placeholder.com/150" alt="">
            <span >
                <h3>Its Not A Toy</h3>
                <h4> or maybe you are Elon Musk... and cars are your toys</h4>
            </span>
        </div>
        <div >        
            <img src="https://via.placeholder.com/150" alt="">
            <span >
                <h3>Its Not A Toy</h3>
                <h4> or maybe you are Elon Musk... and cars are your toys</h4>
            </span>
        </div>
        <div >        
            <img src="https://via.placeholder.com/150" alt="">
            <span >
                <h3>Its Not A Toy</h3>
                <h4> or maybe you are Elon Musk... and cars are your toys</h4>
            </span>
        </div>
    </div>
</body>
</html>