Why wont my Text box center align with my image?

Question

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 class="more-reccomendations"> <div class="more-rec-text"> <h1>More Reccomendations</h1> </div> <div class="container-recc"> <div class="item"> <img id="image-recc" src="Images/614377a3561cd7fb26a377ca_lumen-field-aerial.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/Visit-Rainier-.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/c67b4ab0-50ea-41c9-8e1b-6eb79446b9c0_1920x1080.jpg"> <div class="text-recc"> <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 class="container-recc"> <div class="item"> <img id="image-recc" src="Images/hero_chiihuly_03.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/af998bbb-4f31-4597-928c-d9bd0b52b181_1920x1080.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/57d430adfd8663a061e26c677ac9298e.jpg"> <div class="text-recc"> <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>

Answer 1

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 class="more-reccomendations"> <div class="more-rec-text"> <h1>More Reccomendations</h1> </div> <div class="container-recc"> <div class="item"> <img id="image-recc" src="Images/614377a3561cd7fb26a377ca_lumen-field-aerial.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/Visit-Rainier-.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/c67b4ab0-50ea-41c9-8e1b-6eb79446b9c0_1920x1080.jpg"> <div class="text-recc"> <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 class="container-recc"> <div class="item"> <img id="image-recc" src="Images/hero_chiihuly_03.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/af998bbb-4f31-4597-928c-d9bd0b52b181_1920x1080.jpg"> <div class="text-recc"> <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 class="item"> <img id="image-recc" src="Images/57d430adfd8663a061e26c677ac9298e.jpg"> <div class="text-recc"> <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>