如何將我的圖標對準我的方形盒子的中心？

Question

我試圖對齊我一個正方形的div裏面的圖標有兩個屬性：中心 + 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%; 
    } 

這是w帽子我產生：

有人可以幫助我？

隨意建議我，如果你有任何其他更好的方式來執行此操作。

在此先感謝。

Answer 1

奧普......

與我的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; 


} 

我想我是全套的。我現在明白了。

Answer 2

left: 50%;只適用於絕對定位的元素。因此，設置這些樣式position: absolute;或像這樣margin屬性居中他們：

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

Answer 3

也許你可以設置顯示以塊之前pseudoelement和它設置線HIGHT匹配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

你也可以做這種方式。

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