HTML/CSS文本对齐问题：实现内容居中且text-align设为start

嗨，我明白你的需求啦——想要页面内容整体居中，但文本保持左对齐（text-align: start），还得避开padding防止响应式出问题。咱们来一步步调整你的代码：

核心思路 #

问题出在你给.Content2加了text-align: center，导致里面的所有文本都居中了。正确的做法是：让内容容器本身水平居中，而容器内部的文本设置左对齐。我们可以通过给容器设置max-width（限制内容宽度，提升可读性）+ margin: 0 auto（实现水平居中）来达到效果，完全不需要padding。

修改后的完整代码 #

CSS部分

.Container1 {
  height: 100%;
  width: 100%;
  background: #e8eaed;
  background-size: cover;
  display: table;
  margin: auto;
  top: 0;
}
.About {
  font-family: 'Lato';
  font-weight: 300;
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
  max-width: none;
}
.Content2 {
  margin: 0 auto;
  /* 移除全局文本居中，改为限制容器宽度并水平居中 */
  max-width: 800px; /* 可根据需求调整，比如用80%适配不同屏幕 */
  padding: 0 20px; /* 小屏幕防文本贴边的优化，不会引发响应式问题 */
}
.About h2 {
  font-size: 40px;
  letter-spacing: 4px;
  line-height: 10px;
  font-style: italic;
  color: #70a1af;
  text-shadow: 2px 2px white;
  /* 标题可单独保留居中，若要左对齐改成text-align:start即可 */
  text-align: center;
}
.About p {
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 20px;
  color: #70a1af;
  text-align: start; /* 设置文本左对齐，适配多语言布局 */
}

HTML部分（无需修改）

<section class="Container1">
  <div class="About">
    <div class="Content2">
      <h2> ABOUT ME.</h2>
      <p> Computer Science // British Born // Wannabe Australian </p>
    </div>
  </div>
</section>

关键调整说明 #

1. .Content2的核心修改：移除text-align: center，用max-width限制内容宽度避免过度拉伸，margin: 0 auto让容器在父元素中水平居中，实现整体布局居中的效果。
2. 文本对齐设置：给.About p添加text-align: start，确保文本左对齐（start比left更适配多语言环境，RTL语言下会自动转为右对齐）。
3. 移动端优化：添加padding: 0 20px是为了避免小屏幕下文本紧贴屏幕边缘，这种仅左右的内边距不会破坏响应式布局，反而提升了移动端体验。

这样调整后，内容整体居中的同时文本保持左对齐，完全符合你的需求，还不会有padding带来的响应式困扰～

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