How can i put these words into the center of the div and create space between them?-CodePudding

I want to style this bottom container

into this

but without all the arrows. How can i move the words into the center of the div and create space between them?

I am using that code in my editor:

.bottom-container {
  background-color: #66BFBF;
  height: 200px;
}

 <div class="bottom-container">
        <strong><a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a></strong>
        <strong><a class="footer-link" href="https://twitter.com/">Twitter</a></strong>
        <strong><a class="footer-link" href="https://www.appbrewery.co/">Website</a></strong>
        <p>© 2021 Shervin Bidar.</p>
      </div>

CodePudding user response：

   <div class="bottom-container">
       <div>
           <strong><a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a></strong>
           <strong><a class="footer-link" href="https://twitter.com/">Twitter</a></strong>
           <strong><a class="footer-link" href="https://www.appbrewery.co/">Website</a></strong>
      </div>
       <p>© 2021 Shervin Bidar.</p>
  </div>

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

  // I don't want to give div a class name because I'm lazy
  .bottom-container div:nth-child(1) {
     margin-bottom: 1.3rem;
   }

CodePudding user response：

for the alignment use text-align:center and for the spacing use padding-right on the a element. Hope my answer is helpful.

.bottom-container {
  background-color: #66BFBF;
  height: 200px;
  text-align:center;

}
a{
text-decoration:none;
color:white;
padding-right:25px
}

<div class="bottom-container">
        <strong><a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a></strong>
        <strong><a class="footer-link" href="https://twitter.com/">Twitter</a></strong>
        <strong><a class="footer-link" href="https://www.appbrewery.co/">Website</a></strong>
        <p>© 2021 Shervin Bidar.</p>
      </div>

CodePudding user response：

Add text-align: center; to .bottom-container.

And add a new CSS for .bottom-container a with a padding.

.bottom-container {
  background-color: #66BFBF;
  height: 200px;
  text-align: center;
  padding: 20px;
}

.bottom-container a {
  padding: 0 20px;
}

<div class="bottom-container">
  <strong><a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a></strong>
  <strong><a class="footer-link" href="https://twitter.com/">Twitter</a></strong>
  <strong><a class="footer-link" href="https://www.appbrewery.co/">Website</a></strong>
  <p>© 2021 Shervin Bidar.</p>
</div>

CodePudding user response：

I wrote the code as shown in the image you have shared I think my answer is helpful for you.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body{
  font-family: 'Poppins', sans-serif;
  background:#65BFBF;
}
a{text-decoration:none;
  
}
.wrapper a{
  font-size:18px;
  margin:0 25px;
  color:#0D979E;
}
.bottom-container{
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-top:20px;
}

.bottom-container p{
  margin-top:20px;
  font-size:14px;
  color:white;
}

<div class="bottom-container">
      <div class="wrapper">
        <a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
       <a class="footer-link" href="https://twitter.com/">Twitter</a>
        <a class="footer-link" href="https://www.appbrewery.co/">Website</a>
  </div>
        <p>© 2021 Shervin Bidar.</p>
      </div>