I'm creating a grid of tourist attractions for a fullstack application that im working on. An issue that im struggling with is that I created a row of 3 images with a text box on each image and the text box wont align vertically in the center. When i stretch the page, the text box begins to strech and is not aligned in the center vertically anymore. How can i fix this issue?
.more-rec-text h1{
text-align: center;
font: 50px;
margin-bottom: 50px;
}
#image-recc{
height: 300px;
width: 500px;
}
.container-recc{
display: flex;
justify-content: space-evenly;
align-items: center;
margin-right: 50px;
margin-left: 50px;
padding: 25px;
}
.text-recc h1{
font-size: 30px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.text-recc p{
font-size: 15px;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}<section >
<div >
<h1>More Reccomendations</h1>
</div>
<div >
<div >
<img id="image-recc" src="Images/614377a3561cd7fb26a377ca_lumen-field-aerial.jpg">
<div >
<h1>Sporting Events</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/Visit-Rainier-.jpg">
<div >
<h1>Hiking Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/c67b4ab0-50ea-41c9-8e1b-6eb79446b9c0_1920x1080.jpg">
<div >
<h1>Food Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
<div >
<div >
<img id="image-recc" src="Images/hero_chiihuly_03.jpg">
<div >
<h1>Museums</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/af998bbb-4f31-4597-928c-d9bd0b52b181_1920x1080.jpg">
<div >
<h1>Outdoor Activities</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/57d430adfd8663a061e26c677ac9298e.jpg">
<div >
<h1>Top Attractions</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
</section>CodePudding user response：
That's because the image has a the specific width (not the container of both image and text). If you only need to make them aligned center, you could just make the image become centered by adding margin: 0 auto and display: block to the #image-recc like this:
.more-rec-text h1{
text-align: center;
font: 50px;
margin-bottom: 50px;
}
#image-recc{
height: 300px;
width: 500px;
margin: 0 auto;
display: block;
}
.container-recc{
display: flex;
justify-content: space-evenly;
align-items: center;
margin-right: 50px;
margin-left: 50px;
padding: 25px;
}
.text-recc h1{
font-size: 30px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.text-recc p{
font-size: 15px;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}<section >
<div >
<h1>More Reccomendations</h1>
</div>
<div >
<div >
<img id="image-recc" src="Images/614377a3561cd7fb26a377ca_lumen-field-aerial.jpg">
<div >
<h1>Sporting Events</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/Visit-Rainier-.jpg">
<div >
<h1>Hiking Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/c67b4ab0-50ea-41c9-8e1b-6eb79446b9c0_1920x1080.jpg">
<div >
<h1>Food Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
<div >
<div >
<img id="image-recc" src="Images/hero_chiihuly_03.jpg">
<div >
<h1>Museums</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/af998bbb-4f31-4597-928c-d9bd0b52b181_1920x1080.jpg">
<div >
<h1>Outdoor Activities</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div >
<img id="image-recc" src="Images/57d430adfd8663a061e26c677ac9298e.jpg">
<div >
<h1>Top Attractions</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
</section>