Center Headers in Footer to Organize it-CodePudding

I was able to find an html and css code to start creating my footer. I was able to make it look a bit the way I want as seen in the following code:

However, I wanna be able to center all three headers and I can't seem to find how...

* {
  margin: 0;
  padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
  line-height: 1.5;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.textDecoration {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 100%;
  margin: 0px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

ul {
  list-style: none;
}

.footer {
  background-color: #24262b;
  padding: 0px 0;
  width: 100%;
}

.footer-col {
  width: 25%;
  padding: 0 15px;
}

.footer-col h4 {
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}

.footer-col h4::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  background-color: red;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}

.footer-col ul li:not(:last-child) {
  margin-bottom: 10px;
}

.footer-col ul li a {
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}

.footer-col ul li a:hover {
  color: #ffffff;
  padding-left: 8px;
}

.footer-col .social-links a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}

.footer-col .social-links a:hover {
  color: #24262b;
  background-color: #ffffff;
}

<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<footer >
  <div >
    <div >
      <div >
        <h4>Terms & Conditions</h4>
      </div>
      <div >
        <h4><a  href="#privacy">Privacy and Policy</a></h4>
      </div>

      <div >
        <h4>Follow Us</h4>
        <div >

        </div>
      </div>
      <div >
        <div >
          <h3><img src="https://i.ibb.co/Lp1sB0M/face4.png"></a>
            <img src="https://i.ibb.co/XVzFjBR/ig3.png"></a>
            <img src="https://i.ibb.co/vVRq5dz/tw2.png"></a>
            <img src="https://i.ibb.co/8j8dWcG/yt2.png"></a>
          </h3>
        </div>
      </div>
    </div>
</footer>

Any hints you can provide me to achieve this? What would you recommend for social network icons for the footer?

CodePudding user response：

It makes sense to put all h4's in a single footer-col div together because you want them grouped in the center. So you can do that, then add display: flex; to footer-col and use justify-content: center; to center them. Then you can add a gap to space them out. I also added display: flex; on your social-links to allow them to flex to stay on the same line.

* {
  margin: 0;
  padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
  line-height: 1.5;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.social-links {
  display: flex;
}

.textDecoration {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 100%;
  margin: 0px;
}

.row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
}

.footer {
  background-color: #24262b;
  padding: 0px 0;
  width: 100%;
}

.footer-col {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 2em;
}

.footer-col h4 {
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}

.footer-col h4::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  background-color: red;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}

.footer-col ul li:not(:last-child) {
  margin-bottom: 10px;
}

.footer-col ul li a {
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}

.footer-col ul li a:hover {
  color: #ffffff;
  padding-left: 8px;
}

.footer-col .social-links a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}

.footer-col .social-links a:hover {
  color: #24262b;
  background-color: #ffffff;
}

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>

  <p>In this example, we remove the bullets from the list, and its default padding and margin.</p>

  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>

  <footer >
    <div >
      <div >
        <div >
          <h4>Terms & Conditions</h4>
          <h4><a  href="#privacy">Privacy and Policy</a></h4>
          <h4>Follow Us</h4>
        </div>
        <div ><img src="./img/face4.png">
          <img src="./img/ig3.png">
          <img src="./img/tw2.png">
          <img src="./img/yt2.png">
        </div>
      </div>

    </div>
  </footer>

</body>

</html>