如何将我的图标对齐到方框的中心？

Question

我正在尝试在方形div中对齐我的图标以同时拥有这两个属性： CENTER + MIDDLE

这是我希望得到的：

我在CSS上试过这个：

/* Slick Settings */

  .slick-next {
    right: 0px;
    border: 1px solid black;
    width:35px;
    height:35px;
    padding: 5px;
    display:table;
    text-align: center;
  }

  .slick-prev {
    left: 360px;
    border: 1px solid black;
    width:35px;
    height:35px;
    padding: 5px;
    display:table;
    text-align: center;
  }

  .slick-next:before {
    font-family: FontAwesome;
    content:"\f105";
    color:black;
    display: table-cell;
    vertical-align: middle;
    left: 50%;
  }

  .slick-prev:before {
    font-family: FontAwesome;
    content:"\f104";
    color:black;
    display: table-cell;
    vertical-align: middle;
    left: 50%;
  }

这是我制作的：

有人可以帮我吗？

如果你还有其他更好的方法可以提醒我，请随时建议我。

提前致谢。

Answer 1

你也可以这样做。

＆＃13;

＆＃13;

.slick-next {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    text-align: center;
}
.slick-next:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    height: 100%;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="slick-next"><i class="fa fa-angle-right"></i></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

left: 50%;只适用于绝对定位的元素。因此，将这些样式设置为position: absolute;或将其置于margin属性中，如下所示：

margin-left: auto;
margin-right: auto;

Answer 3

也许你可以在伪元素之前将显示设置为BLOCK，并设置它的行高以匹配DIV。这将垂直居中。将文本对齐放置到中心和宽度为100％将使文本水平居中。

＆＃13;

＆＃13;

 .slick-prev {
    border: 1px solid black;
    width:35px;
    height:35px;
  }
  .slick-prev:before {
    font-family: FontAwesome;
    content:"\f104";
    color:black;
    display: block;
    text-align: center;
    width: 100%;
    line-height: 35px;
  }

＆＃13;

<div class="slick-prev"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

Opp ......

玩弄CSS之后。这似乎可以解决问题。

/* Slick Settings */

.slick-next {
  right: 10px;

  border: 1px solid black;
  width:35px;
  height:35px;
  padding: 5px;
  display:table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.slick-prev {
  left: 360px;

  border: 1px solid black;
  width:35px;
  height:35px;
  padding: 5px;
  display:table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;

}

.slick-next:before {
  font-family: FontAwesome;
  content:"\f105";
  color:black;


}

.slick-prev:before {
  font-family: FontAwesome;
  content:"\f104";
  color:black;


}

我想我是全能的。我现在知道了。