バックグラウンドに関する要素を中央に配置する方法

Question

要素をiという形で、スタイルを適用したいアイコンの形にしています。スタイルは円の形をした背景です。残念なことにレンダリングは希望のスタイルではなく、私が望むスタイルを適用することができました。あなたがスクリーンショットで見ることができるように、背景は要素を完全にカバーしていません。ここで

CSSコードです：

#carousel-right{ 
    z-index: 1000; 
    position: absolute; 
    margin-top: -50px; 
    margin-right: 20px; 
    border-radius: 50%; 
    width: 30px; 
    height:30px; 
    background-color: white; 
} 

そしてHTML 1：

<i class="fa fa-3x fa-angle-left" aria-hidden="true"></i> 

Answer 1

あなたにそれを使用するこの

body { 
 
background: #ccc; 
 
} 
 

 
#carousel-right .fa { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 26px; 
 
} 
 

 
#carousel-right{ 
 
    z-index: 1000; 
 
    position: absolute; 
 
    margin-right: 20px; 
 
    border-radius: 50%; 
 
    width: 30px; 
 
    height:30px; 
 
    background-color: white; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<a href="#" id="carousel-right" class="circle"><i class="fa fa-3x fa-angle-left" aria-hidden="true"></i></a>

Answer 2

がi.fa-angle-leftクラスにtext-align:centerとvertical-align:middleを与えます。

Answer 3

ようtransformを使用することができます。そして、あなたの＃カルーセル右に中央と：あなたはテキスト整列を追加する必要が

#carousel-right { 
    position: relative; 
} 

#carousel-right > .fa { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) 
}