css - 如何在页脚中垂直对齐这些 div？

Question

我正在建立一个模拟投资者网站，但似乎无法正确对齐页脚中的内容。一切都向左倾斜，使它看起来有点难看。我想让徽标、社交媒体按钮和联系信息居中，但它目前的样子如下：

我尝试使用align-content: center，margin: auto但没有任何改变。也许解决方案是使用 flexbox？这是我的页脚和 CSS 代码：

import React from "react";
import logo from "../../assets/images/logo.png";
import { IconContext } from "react-icons";
import {
  FaEnvelope,
  FaFacebookF,
  FaInstagram,
  FaLinkedin,
  FaPhone,
  FaTwitter,
} from "react-icons/fa/index";
import '../../assets/css/footer.css';

function Footer() {
  const year = (new Date()).getFullYear();

  return (
    <footer style={{backgroundColor: '#0c1f47'}} className="footer p-3 p-sm-4 p-md-5 row mx-auto overflow-hidden">
      <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 text-justify text-sm-left">
          Teck is a simplified and better style of communication between
          investors and startups
        </p>        
      </div>

      <div className="col-lg-4 col-sm-6 my-4">
        <h2 className="my-2">Follow Teck</h2>
          <div className="socials my-4">
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="200" data-aos-once="true" className="ml-0" target="_blank" rel="noreferrer" href="">
                <FaFacebookF className="icon" />
              </a>
            </IconContext.Provider>
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="500" data-aos-once="true" target="_blank" rel="noreferrer" href="">
                <FaInstagram className="icon" />
              </a>
            </IconContext.Provider>
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="800" data-aos-once="true" target="_blank" rel="noreferrer" href="">
                <FaLinkedin className="icon" />
              </a>
            </IconContext.Provider>
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="1100" data-aos-once="true" target="_blank" rel="noreferrer" href="">
                <FaTwitter className="icon" />
              </a>
            </IconContext.Provider>
          </div>
        </div>

      <div className="col-lg-4 col-sm-6">
        <h2 className="mt-4 d-block mb-0">Contact Us</h2>

        <ul className="footer-box">
          <li>
            <a href="tel:[phone]" className="text-white">
              <FaPhone className="mb-1 mr-2" />[phone]
            </a>
          </li>
          <li>
            <a href="mailto:[e-mail]" className="text-white">
              <FaEnvelope className="mb-1 mr-2" />[e-mail]
            </a>
          </li>
        </ul>
      </div>
      <div className="col-12 text-center mt-5">
        <small>{year} Teck Corporation &copy; All Right Reserved</small>
      </div>
    </footer>
  );
}

export default Footer;

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

footer {
  color: #fff;
  font-family: "Montserrat", sans-serif;
}

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

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

.logo > h2 {
  margin-bottom: 0;
  padding-right: 50%;
}

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

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

.footer a {
  text-decoration: none;
}

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

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

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

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

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

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

标签： cssalignmentcentering

Answer 1

您应该<footer>使用类“包装器”将标签内的所有内容包装在 div 容器中，并添加以下 css。

.wrapper {
display: flex;
justify-content: center;
align-items:enter;
}