Issue
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>
do you guys know how i can fix it please thanks
here are some images
i want it to look like the second picture
the first picture is how it currently looks
Solution
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 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>Answered By - Diya' Answer Checked By - Candace Johnson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.