如何在React项目页脚中垂直居中对齐logo、社交按钮等div元素

可以通过flexbox实现需求。你之前的align-content: center和margin: auto未生效，是因为align-content仅作用于已设置display: flex的多行容器的交叉轴对齐，margin: auto需要配合子元素定宽、父容器符合布局规则才能生效，你的原有代码没有满足这两个属性的触发条件，同时还存在冗余样式冲突。

修改方案 #

1. 替换CSS代码

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
* {
  padding: 0;
  margin: 0;
}

footer {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  display: flex;
  justify-content: center;
}

.col-md-4 img {
  width: 50px;
  height: 50px;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.logo > img {
  margin-right: 20px;
}

.logo > h2 {
  margin-bottom: 0;
}

.footer h2 {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

.footer ul {
  list-style: none;
  padding-left: 0;
  text-align: center;
}

.footer a {
  text-decoration: none;
}

.footer-box {
  margin-top: 20px;
}

.footer-box a {
  color: #fff;
}

.footer-box li {
  padding-bottom: 5px;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

.socials a {
  width: 40px;
  height: 40px;
  display: inline-block;
}

.icon:hover {
  border-radius: 5px;
  box-shadow: 0 0 1px 2px #25eee2;
}

.footer .intro-text {
  text-align: center;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 600px) {
  .col-md-4 img {
    width: 30px;
    height: 30px;
  }
}

2. 调整React组件两处细节

• 给logo下方的p标签添加intro-text类，删除原有的text-justify text-sm-left类
• 删除第一个社交图标a标签上的ml-0类，避免图标间距不均

修改后的核心组件片段参考：

<div className="col-lg-4 my-4">
  <div className="logo">
    <img width="50px" src={logo} alt="logo" />
    <h2 className="mb-0 mt-2">TECK</h2>
  </div>
  <p className="my-4 intro-text">
    Teck is a simplified and better style of communication between
    investors and startups
  </p>        
</div>

// 社交图标去掉ml-0
<a data-aos="fade-right" data-aos-duration="300" data-aos-delay="200" data-aos-once="true" target="_blank" rel="noreferrer" href="">
  <FaFacebookF className="icon" />
</a>

修改后页脚的logo、社交按钮、联系信息都会在各自的栅格列内居中对齐，符合预期效果。

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