[英]How can I align my icon to be in center of my square box?
我正在尝试在方形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%;
}
这是我生产的:
有人可以帮我弄这个吗 ?
如果您还有其他更好的归档方法,请随时建议我。
提前致谢。
您也可以这样做。
.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>
left: 50%;
仅适用于绝对定位的元素。 因此,将这些样式设置为position: absolute;
或使用margin属性将它们居中,如下所示:
margin-left: auto;
margin-right: auto;
也许您可以将伪元素之前的显示设置为“块”,并将其行高设置为与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>
奥普...
在玩完我的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;
}
我想我已经准备好了。 我知道了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.