css 如何将字体真棒图标居中到背景图像

j5fpnvbx 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(122)

我试图对齐字体真棒图标在中间的背景图像时，我添加position:relative;和使用top:xxpx;它的工作，但我想找出一种方法，我不必使用位置。附件是一个fiddle的我的代码，和下面的一个片段。
垂直和水平居中。

.footer-top {
  height: 100px;
  background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
}

.footer-top a {
  text-decoration: none;
  color: white;
}

.navbar-list {
  padding-left: 540px;
  display: inline;
}

.navbar-list:hover {
  color: #fe5b1f;
  cursor: pointer;
}

.navbar-icons {
  display: inline;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
  <ul class="navbar-list" id="icons-list">
    <li class="navbar-icons">
      <a href="#"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></a>
    </li>
    <li class="navbar-icons">
      <a href="#"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></a>
    </li>
    <li class="navbar-icons">
      <a href="#"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></a>
    </li>
  </ul>
</div>

css

来源：https://stackoverflow.com/questions/44490902/how-to-center-font-awesome-icons-to-a-background-image

1条答案

按热度按时间

6yoyoihd1#

我会在父对象上使用display: flex; align-items: center; justify-content: center;将子对象放在死点，然后在ul上使用padding: 0删除默认的左填充。

.footer-top {
  height: 100px;
  background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-top a {
  text-decoration: none;
  color: white;
}

.navbar-list {
  padding: 0;
}

.navbar-list:hover {
  color: #fe5b1f;
  cursor: pointer;
}

.navbar-icons {
  display: inline;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
  <ul class="navbar-list" id="icons-list">
    <li class="navbar-icons"><a href="#"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></a></li>

    <li class="navbar-icons"><a href="#"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></a></li>
    <li class="navbar-icons"><a href="#"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></a></li>
  </ul>
</div>

你说你不想使用position，而是因为它会导致其他元素在页面上移动，如果你在ul上使用position: absolute，其他元素不会因此移动。
一个二个一个一个

赞(0）回复(0）举报 2023-03-09

我来回答

css 如何将字体真棒图标居中到背景图像

1条答案

相关问题

热门标签

最新问答