フォントのすばらしいアイコンを背景画像に合わせる方法

Question

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>

Answer 1

私は死に子供を置くために、親に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を使用している場合は、それ以外は何も移動しません。

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