如何使有关背景的元素居中

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一：

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

Answer 1

您可以像这样使用transform

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将text-align:center和vertical-align:middle提供给i.fa-angle-left课程。

Answer 3

将其用作：

nullptr