Question

当我添加if yourView.superview != nil并使用position:relative;时，我尝试将字体真棒图标对齐在背景图像的中间但它有效但我想弄清楚我的方式不要使用职位。附件是fiddle我的代码，以及下面的代码段。

＆＃13;

top:xxpx;

＆＃13;

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

＆＃13;

Answer 1

我会在父母身上使用display: flex; align-items: center; justify-content: center;将孩子置于死亡中心。然后使用padding: 0上的ul删除默认的左边距。

.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，但是因为它会导致其他元素在页面上移动。如果您在position: absolute上使用ul，则不会因此而移动任何其他内容。

.footer-top {
  height: 100px;
  background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
  position: relative;
}

.footer-top a {
  text-decoration: none;
  color: white;
}

.navbar-list {
  padding: 0; margin: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);  
}

.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>

如何将字体真棒图标置于背景图像中心

1 个答案: