Question

我正在尝试将超酷字体图标在其圆角背景中垂直和水平移动到中心。但是每次它都在左侧，顶部或底部。
如何修复这些图标并移至中心？

这是代码（因为它位于页脚中，因此我在CSS中添加了额外的代码行）：

     
    .page-footer {
      background-color:#222222;
      padding: 0 40px;
      text-align: center;
    }
    .page-footer a {
      font-size:14px;
      color:#ffffff;
    }
    
    ul.social-buttons {
      text-align: center;
      justify-content: center;
      margin-top:40px;
    }
    
    ul.social-buttons li a {
      font-size: 35px;
      line-height: 50px;
      display: block;
      width: 70px;
      height: 70px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: #222222;
      border-radius: 100%;
      outline: none;
      background-color: #ffffff;
      border:5px solid #fed136;
    }
    
    ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
      background-color: #fed136;
    }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="col-md-4">

                  <ul class="list-inline social-buttons">
                      <li class="list-inline-item">
                        <a href="#">
                          <i class=" fab fa-linkedin-in"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#">
                          <i class="fab fa-google-plus-g"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#">
                          <i class="fab fa-facebook-f"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                          <a href="#">
                            <i class="fab fa-twitter"></i>
                          </a>
                        </li>
                    </ul>
      </div>

Answer 1

您可以在vertical-align:middle元素上使用i。它们是inline-block元素，它们将在容器内垂直对齐。无需添加特定的行高或边距等。

见下文

.page-footer {
  background-color: #222222;
  padding: 0 40px;
  text-align: center;
}

.page-footer a {
  font-size: 14px;
  color: #ffffff;
}

ul.social-buttons {
  text-align: center;
  justify-content: center;
  margin-top: 40px;
}

ul.social-buttons li a {
  font-size: 35px;
  line-height: 50px;
  display: block;
  width: 70px;
  height: 70px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #222222;
  border-radius: 100%;
  outline: none;
  background-color: #ffffff;
  border: 5px solid #fed136;
}

ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
  background-color: #fed136;
}

ul.social-buttons li a i {
vertical-align:middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<div class="col-md-4">
  <ul class="list-inline social-buttons">
    <li class="list-inline-item">
      <a href="#">
                      <i class=" fab fa-linkedin-in"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                      <i class="fab fa-google-plus-g"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                      <i class="fab fa-facebook-f"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                        <i class="fab fa-twitter"></i>
                      </a>
    </li>
  </ul>
</div>

另一个选择是

ul.social-buttons li a {
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 2

line-height的大小必须与元素容器的大小相同。尽管<a>元素占据了70px的高度，但是10px被边框（5px的每一边）占用了高度，从而使容器的高度为60px 。但是，您仅将50px用于line-height。

将line-height从50px更改为60px。

此方法仅更改line-height，而不使用弹性样式。

.page-footer {
  background-color:#222222;
  padding: 0 40px;
  text-align: center;
}
.page-footer a {
  font-size:14px;
  color:#ffffff;
}

ul.social-buttons {
  text-align: center;
  justify-content: center;
  margin-top:40px;
}

ul.social-buttons li a {
  font-size: 35px;
  line-height: 60px;
  display: block;
  width: 70px;
  height: 70px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #222222;
  border-radius: 100%;
  outline: none;
  background-color: #ffffff;
  border:5px solid #fed136;
}

ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
  background-color: #fed136;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div class="col-md-4">
  <ul class="list-inline social-buttons">
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-linkedin-in"></i>
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-google-plus-g"></i>
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-facebook-f"></i>
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
  </ul>
  </div>

如何在此社交按钮中将图标移到中心？

2 个答案: