标题无法居中及响应式布局问题求助

我来帮你搞定这两个问题，咱们一个个拆解：

问题1：「Education」标题无法居中 #

你虽然给.education-sec h1加了text-align: center，但父容器.education-width设置了display: table，它的直接子元素（包括.ed-under-line）会被浏览器按照表格布局规则解析，导致.ed-under-line的宽度没有占满整个容器，所以标题看起来没居中。

修复方案： #

给.ed-under-line添加以下CSS，让它成为跨列的表格单元格，占满整个容器宽度：

.ed-under-line {
  display: table-cell;
  width: 100%;
  text-align: center;
}

同时可以把.education-sec h1里的text-align: center去掉，让样式更集中。

问题2：响应式布局下图片在上、文本在下 #

当前用了table+table-cell的横向布局，要实现小屏幕下的上下排列，需要用媒体查询在指定宽度阈值下切换布局方式。

修复方案： #

在CSS末尾添加媒体查询代码（阈值可根据需求调整）：

/* 屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
  .education-width {
    display: block; /* 取消表格布局 */
  }
  .ed-img, .education-info {
    display: block; /* 取消单元格布局 */
    width: 100%; /* 占满容器宽度 */
    padding-left: 0; /* 移除左边内边距适配小屏幕 */
  }
  .ed-img .bw_image {
    margin-left: 0; /* 移除图片左边外边距 */
    display: block;
    margin: 0 auto; /* 图片居中显示（可选） */
  }
}

完整修改后的代码 #

CSS部分 #

* {
 margin: 0;
 padding: 0;
}
.education-sec {
 width: 100%;
 padding: 40px 0;
 overflow: hidden;
}
.education-width {
 max-width: 1200px;
 overflow: hidden;
 padding: 0 20px;
 margin: auto;
 width: 100%;
 display: table;
 table-layout: fixed;
}
.education-sec h1 {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 28px;
 text-transform: uppercase;
}
.ed-under-line {
  display: table-cell;
  width: 100%;
  text-align: center;
}
.ed-under-line h1 {
 -webkit-text-decoration: #f57e3a solid underline;
 text-decoration: #f57e3a solid underline;
 -webkit-text-underline-position: under;
 text-underline-position: under;
}
.education-info {
 display: table-cell;
 vertical-align: middle;
 width: 60%;
 padding-top: 30px;
 padding-left: 100px;
}
.education-info p {
 font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
 font-size: 15px;
 text-align: justify;
 text-justify: inter-word;
 line-height: 1.6;
 overflow: hidden;
 margin: 10px;
}
.ed-img {
 display: table-cell;
 vertical-align: middle;
 width: 40%;
}
.ed-img .bw_image {
 margin-left: 100px;
 max-width: 100%;
 height: auto;
 padding-top: 50px;
}

/* 响应式媒体查询 */
@media (max-width: 768px) {
  .education-width {
    display: block;
  }
  .ed-img, .education-info {
    display: block;
    width: 100%;
    padding-left: 0;
  }
  .ed-img .bw_image {
    margin-left: 0;
    display: block;
    margin: 0 auto;
    padding-top: 30px;
  }
}

HTML部分（无需修改） #

<section id="education">
 <div class="education-sec">
 <div class="education-width">
 <div class="ed-under-line">
 <h1>Education</h1>
 </div>
 <div class="ed-img">
 <img class="bw_image" src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-thumb.jpg">
 </div>
 <div class="education-info">
 <p> XYZ University <br> M.Sc <br> Jan 21 - Sep 22</p>
 </div>
 </div>
 </div>
</section>

调整后，标题就能完美居中，同时在小屏幕设备上图片会自动切换到文本上方，完全符合你的需求~

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