CODEWITHSUNDEEP
htmlcss
code-8
code-8

Reputation: 58662

How can I align my icon to be in center of my square box?

I'm trying to align my icon inside a square div to have both properties: CENTER + MIDDLE

This is what I hope to get :

enter image description here

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 :

enter image description here

Can someone help me with this ?

Feel free to suggest me if you have any other better way of archieving this.

Thanks in advance.

Upvotes: 2

Views: 5049

Answers (4)

Stickers
Stickers

Reputation: 78686

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>

Upvotes: 2

Zivko
Zivko

Reputation: 377

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>

Upvotes: 1

code-8
code-8

Reputation: 58662

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.

enter image description here

Upvotes: 0

Chase
Chase

Reputation: 2304

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;

Upvotes: 1

Related Questions