I'm trying to align my icon inside a square div to have both properties: CENTER + MIDDLE
This is what I hope to get :
I have tried this on my 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%;
}
This is what I produce :
Can someone help me with this ?
Feel free to suggest me if you have any other better way of archieving this.
Thanks in advance.
You could also do it this way.
.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%;
would only work on an absolutely positioned element. So set those styles to position: absolute;
or center them with the margin property like this:
margin-left: auto;
margin-right: auto;
Maybe you can set display to BLOCK for before pseudoelement and set line-hight of it to match DIV. That will center text vertically. Placing text-align to center and width to 100% will center text horizontally.
.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>
Opp...
After playing around with my CSS. This seem to do the trick.
/* 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;
}
I think I am all-set. I got it now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.