So zentrieren Sie ein Element in Bezug auf einen Hintergrund

Question

Ich habe ein Element i in Form eines Symbols, auf das ich einen Stil anwenden möchte. Der Stil ist ein kreisförmiger Hintergrund. Ich konnte den gewünschten Stil anwenden, leider ist das Rendering nicht das gewünschte. Der Hintergrund deckt das Element nicht vollständig ab, wie Sie auf dem Screenshot sehen können.

ist die CSS-Code:

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

Und das HTML ein:

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

Answer 1

Sie transform verwenden können, wie diese

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

Geben text-align:center und vertical-align:middle-i.fa-angle-left Klasse.

Answer 3

verwenden Sie es als:

#carousel-right { 
    position: relative; 
} 

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