如何让.bottom-container内文字居中并给链接添加合理间距？

推荐实现代码 #

你可以直接在原有CSS基础上补充以下样式即可实现需求：

/* 原有基础上补充属性 */
.bottom-container {
  background-color: #66BFBF;
  height: 200px;
  text-align: center;
  padding-top: 50px;
  box-sizing: border-box;
}

/* 新增链接样式控制间距 */
.footer-link {
  margin: 0 22px;
  color: #11999e;
  text-decoration: none;
}

/* 新增版权文字样式控制上下间距 */
.bottom-container p {
  margin-top: 32px;
  color: #fff;
  font-size: 0.75rem;
}

实现说明 #

• text-align: center 直接实现容器内所有文本、行内链接整体水平居中
• 给.footer-link设置左右margin即可控制三个链接之间的横向间距，数值可根据视觉效果自行调整
• 给版权p标签设置上margin，拉开和上方链接的垂直距离，排版更协调
• box-sizing: border-box 保证容器总高度始终保持你设定的200px，不会因为加内边距导致高度超出预期

如果需要更精准的垂直居中效果，也可以使用flex布局实现，修改.bottom-container样式即可：

.bottom-container {
  background-color: #66BFBF;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

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