如何解决图片文本框无法垂直居中及页面拉伸错位问题？

问题根源 #

1. 重复ID违规使用：所有图片共用同一个id="image-recc"，HTML中ID必须唯一，会引发样式冲突、JS选择器失效等问题。
2. 文本框无垂直居中控制：.text-recc仅设置了文字水平居中，未配置垂直方向的居中规则。
3. 固定尺寸破坏响应式：图片用固定宽高值，页面拉伸时比例失衡；容器未设置换行，窄屏时元素挤压变形。
4. 容器高度对齐失效：.container-recc的align-items: center仅对齐元素中线，但未强制所有item高度一致，导致文本框位置参差不齐。

修复代码 #

修正后的CSS #

.more-rec-text h1{
    text-align: center;
    font-size: 50px; /* 修正原font属性语法错误 */
    margin-bottom: 50px;
}
.image-recc{ /* 将ID改为class，避免重复 */
    width: 100%;
    height: 300px;
    object-fit: cover; /* 保持图片比例，拉伸时不变形 */
}
.container-recc{
    display: flex;
    justify-content: space-evenly;
    align-items: stretch; /* 强制所有item高度一致 */
    flex-wrap: wrap; /* 窄屏自动换行 */
    margin: 0 50px;
    padding: 25px;
    gap: 20px; /* 用gap控制item间距，比margin更可靠 */
}
.item{
    flex: 1;
    min-width: 300px; /* 设置最小宽度，避免过窄 */
    display: flex;
    flex-direction: column; /* 图片与文本上下排列 */
}
.text-recc{
    flex: 1; /* 占满item剩余高度 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 内部文字垂直居中 */
    padding: 15px;
    box-sizing: border-box; /* 内边距不影响宽度 */
}
.text-recc h1{
    font-size: 30px;
    text-align: center;
    margin: 0 0 10px; /* 优化间距 */
}
.text-recc p{
    font-size: 15px;
    text-align: center;
    margin: 0; /* 清除默认margin */
}

修正后的HTML #

<section class="more-reccomendations">
    <div class="more-rec-text">
        <h1>More Reccomendations</h1>
    </div>
    <div class="container-recc">
        <div class="item">
            <img class="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 class="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 class="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 class="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 class="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 class="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>

核心优化说明 #

• 替换重复ID为class，符合HTML规范。
• 用object-fit: cover保证图片拉伸时比例不变，避免变形。
• 给.item设置flex布局，让文本框自动占满剩余高度，再通过justify-content: center实现文字垂直居中。
• 添加flex-wrap: wrap和min-width，确保窄屏时布局自动适配，元素不会挤压。
• 用gap替代margin控制间距，布局更稳定。

内容的提问来源于stack exchange，提问作者xRGx901x