如何在响应式div中调整内容尺寸并保持居中显示？

你遇到的问题根源是仅用百分比设置max-width，窗口缩小时25%的宽度会变得过窄。要实现居中且窄幅、同时自适应窗口大小的效果，可以调整CSS的宽度控制逻辑，结合固定最大宽度、相对宽度和自动外边距：

优化后的CSS代码 #

.intro {
    text-align: center;
    /* 宽屏时限制内容最大宽度，保持窄幅效果，可自行调整数值 */
    max-width: 600px;
    /* 窄屏时让内容占屏幕90%宽度，避免过挤 */
    width: 90%;
    /* 左右自动外边距实现容器水平居中 */
    margin: 0 auto;
}

逻辑说明 #

• max-width: 600px：确保在宽屏设备上，内容不会过度拉伸，始终保持你想要的窄幅视觉效果
• width: 90%：当窗口宽度小于600px时，内容会自适应占屏幕的90%，避免像原来25%那样过窄
• margin: 0 auto：让.intro容器在父元素中水平居中，配合text-align: center实现内部文本的居中对齐

完整代码示例 #

HTML #

<div class="container-fluid intro">
  <hr style="height: 5px; width:40%;">
  <h2>Hi, I'm Heather!</h2>
  <h4>I'm a graphic design student out of New Hampshire with a love for all things fun, colorful, and creative!</h4>
  <p><a href="resume.pdf">Resume</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:heather@hlcstudios.com">Email</a></p>
  <hr style="height: 5px; width:40%">
</div>

（注：内部文本的text-align: center可以去掉，因为.intro已经设置了该属性）

CSS #

.intro {
    text-align: center;
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
}

你可以根据自己的视觉需求，调整max-width的数值（比如550px、700px）或者width的百分比，找到最适合的显示效果。

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