无法居中id为locations的文本？Tea Cozy项目布局求助

在复刻Tea Cozy网页时，id为locations的<p>标签无法在locationbox容器内居中。尝试将其display改为inline无效，添加margin-left会导致容器内所有元素偏移。

问题根源 #

1. locationbox设置了display:flex但默认是flex-direction:row，导致标题<p>和三个地址块<div class="lcnbox">在同一行排列，无法单独居中标题。
2. 给<p id="locations">设置display:flex是错误操作，块级文本标签无需用flex实现居中，反而会破坏原有布局。
3. HTML中存在重复id属性（如多个id="teas"、id="teadivs"），违反HTML规范，会导致样式、JS选择器失效。

修复方案 #

步骤1：修正HTML重复id问题 #

将重复的id改为class：

• 所有id="teas"改为class="teas"
• id="teadivs"改为class="teadivs"

步骤2：修改CSS样式 #

1. 重构locationbox布局

将容器改为垂直flex布局，让标题和地址块上下排列，同时修正背景、尺寸属性：

.locationbox {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中所有子元素 */
  background-image: url('images/5Locations.webp');
  background-size: cover; /* 覆盖容器，避免留白 */
  width: 1200px; /* 和其他区块统一宽度 */
  height: 500px; /* 匹配背景图高度 */
  padding-top: 50px; /* 给标题留出顶部空间 */
}

2. 简化并居中locations标题

直接用text-align:center实现文本居中，同时调整字体样式匹配设计：

#locations {
  font-family: Helvetica;
  font-size: 2rem;
  color: seashell;
  margin: 0 0 15px 0; /* 调整与地址块的间距 */
  text-align: center;
  width: 100%; /* 确保标题占满容器宽度，实现全局居中 */
}

3. 调整地址块容器布局

新增父容器包裹三个地址块，用flex实现水平排列：

<!-- 修改后的Locations区块HTML -->
<div class="locationbox">
  <p id="locations">Locations</p>
  <div class="locations-wrapper">
    <div class="lcnbox">...</div>
    <div class="lcnbox">...</div>
    <div class="lcnbox">...</div>
  </div>
</div>

添加对应CSS：

.locations-wrapper {
  display: flex;
  gap: 40px; /* 灵活控制地址块间距 */
}

.lcnbox {
  font-family: Helvetica;
  text-align: center;
  color: seashell;
  width: 300px;
  height: 300px;
  background-color: black;
  line-height: 3.0;
  padding: 20px 0; /* 用内边距替代margin-top，避免容器偏移 */
  margin: 0; /* 清除原有margin */
}

4. 修复联系信息区块居中

替换固定margin-left为flex布局，实现自适应居中：

.teacozy {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Helvetica;
  color: seashell;
}

完整修正后的关键代码 #

HTML（Locations部分） #

<!--LOCATIONS BEGIN-->
<div class="locationbox">
  <p id="locations">Locations</p>
  <div class="locations-wrapper">
    <div class="lcnbox">
      <h3><b>Downtown</b> <br>
        384 West 4th Street <br>
        Suite 108 <br>
        Portland, Maine <br>
      </h3>
    </div>
    <div class="lcnbox">
      <h3><b>East Bayside</b> <br>
        3433 Phisherman's Avenue <br>
        (Northwest Corner)<br>
        Portland, Maine <br>
      </h3>
    </div>
    <div class="lcnbox">
      <h3><b>Oakdale</b><br>
        515 Crescent Avenue<br>
        Second Floor<br>
        Portland, Maine <br>
      </h3>
    </div>
  </div>
</div>

CSS（Locations及相关部分） #

/* LOCATION SECTION*/
.locationbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('images/5Locations.webp');
  background-size: cover;
  width: 1200px;
  height: 500px;
  padding-top: 50px;
}

#locations {
  font-family: Helvetica;
  font-size: 2rem;
  color: seashell;
  margin: 0 0 15px 0;
  text-align: center;
  width: 100%;
}

.locations-wrapper {
  display: flex;
  gap: 40px;
}

.lcnbox {
  font-family: Helvetica;
  text-align: center;
  color: seashell;
  width: 300px;
  height: 300px;
  background-color: black;
  line-height: 3.0;
  padding: 20px 0;
  margin: 0;
}

/*TEA COZY CONTACT INFORMATION*/
.teacozy {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Helvetica;
  color: seashell;
}

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