我怎样才能将这些词放在 div 的中心并在它们之间创建 space？

Question

我想设计这个底部容器的样式

进入这个

但没有所有的箭头。我如何将单词移动到 div 的中心并在它们之间创建 space？

我正在我的编辑器中使用该代码：

.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>

Answer 1

将 text-align: center; 添加到 .bottom-container。

并为 .bottom-container a 添加新的 CSS 和 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>

Answer 2

对齐使用 text-align:center 对于间距，请在 a 元素上使用 padding-right。希望我的回答对你有帮助。

.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>

Answer 3

   <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;
   }

Answer 4

我按照你分享的图片写了代码，我觉得我的回答对你有帮助。

@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>

我怎样才能将这些词放在 div 的中心并在它们之间创建 space？

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

html

css

containers