CODEWITHSUNDEEP
htmlcss
KubiRoazhon
KubiRoazhon

Reputation: 1839

How to center an element regarding a background

I have an element i in the form of an icon to which I want to apply a style. The style is a circle-shaped background. I was able to apply the style that I wish, unfortunately the rendering is not the desired one. The background does not completely cover the element as you can see on the screenshot.

enter image description here

Here is the CSS code : 

  #carousel-right{
    z-index: 1000;
    position: absolute;
    margin-top: -50px;
    margin-right: 20px;
    border-radius: 50%;
    width: 30px;
    height:30px;
    background-color: white;
}

And the HTML one:

<i class="fa fa-3x fa-angle-left" aria-hidden="true"></i>

Upvotes: 1

Views: 59

Answers (3)

Shah Zaib
Shah Zaib

Reputation: 25

use it as:

#carousel-right {
  position: relative;
}

#carousel-right > .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Upvotes: 1

Ram kumar
Ram kumar

Reputation: 3162

You can use transform like this 

body {
background: #ccc;
}

#carousel-right .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
}

#carousel-right{
    z-index: 1000;
    position: absolute;
    margin-right: 20px;
    border-radius: 50%;
    width: 30px;
    height:30px;
    background-color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<a href="#" id="carousel-right" class="circle"><i class="fa fa-3x fa-angle-left" aria-hidden="true"></i></a>

Upvotes: 4

ankita patel
ankita patel

Reputation: 4251

Give text-align:center and vertical-align:middle to i.fa-angle-left class.

Upvotes: 1

Related Questions