如何將圖標對准方形框的中心？

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

您也可以這樣做。

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

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

Answer 2

left: 50%; 僅適用於絕對定位的元素。 因此，將這些樣式設置為position: absolute; 或使用margin屬性將它們居中，如下所示：

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

Answer 3

也許您可以將偽元素之前的顯示設置為“塊”，並將其行高設置為與DIV匹配。 這將使文本垂直居中。 將文字對齊居中，寬度設置為100％將水平居中。

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

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

Answer 4

奧普...

在玩完我的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;


}

我想我已經准備好了。 我知道了