Icon is not showing vertically centered inside a circular tag

Question

I am trying to create a circle with a tag and putting icon inside that circle. But that icon is coming little down.

Par Tha · Answer 1 · 2019-11-06T06:27:38.540

2

Try this CSS:

* {
  box-sizing: border-box;
}

body {
  background: black;
}

a {
  display: flex;          /* Newly added */
  align-items: center;    /* Newly added */
  border: 1px solid #fff; 
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  text-align: center;
  transition: all 0.2s;
}

i {
   color: white;
}

a i {
  margin: 0 auto; /* Newly added */
}

<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>

<body>
  <a><i class="fab fa-facebook-f"></i></a>
</body>

</html>

edited Nov 06 '19 at 06:27

answered Nov 06 '19 at 06:22

Par Tha

1,265
7
10

I made you a snippet. Please change it to how you meant it to look - you missed the color: white; – mplungjan Nov 06 '19 at 06:24
It is working with the flex, can't we do it by passing line-height the same as height and width? – Pujan Shah Nov 06 '19 at 06:27
Ohh, as I am giving height and width explicitly no need to give padding. – Pujan Shah Nov 06 '19 at 06:31

score 2 · Accepted Answer · answered Nov 06 '19 at 06:30

The position of your icon was due to the padding and the default line-height of your a element. You can try to remove the padding and set the line-height equal to the element height.

You can also use CSS flex to center your icon.

* {
  box-sizing: border-box;
}

body {
  background: black;
}

#no-padding {
  box-sizing: border-box;
  display: inline-block;
  padding: 0;
  line-height: 44px;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  text-align: center;
  transition: all 0.2s;
}

#flex {
  display: inline-flex;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

i {
  color: white;
}

<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>

<body>
  <a id='no-padding'><i class="fab fa-facebook-f"></i></a>
  <a id='flex'><i class="fab fa-facebook-f"></i></a>
</body>

</html>

It worked by removing the padding and setting the line-height to the same as the height. Can achieve the same with flex too. — Pujan Shah, Nov 06 '19 at 06:35

score 0 · Answer 3 · edited Nov 06 '19 at 06:31

0

Add these styles to icon.

display: inline-block;
padding: 0px 15px; /* changed style */
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
line-height: 44px; /* added style */

edited Nov 06 '19 at 06:31

mplungjan

169,008
28
173
236

answered Nov 06 '19 at 06:26

Yudiz Solutions

4,216
2
7
21

score 0 · Answer 4 · answered Nov 06 '19 at 07:06

You can do by using line height try this:

a {
   display: inline-block;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
    width: 44px;
  height: 44px;
  line-height: 44px;
  align-items: center;
  text-align: center;
  justify-content: center;
  transition: all 0.2s;
}

score 0 · Answer 5 · answered Nov 06 '19 at 08:08

0

I think, flexbox is the simplest solution, just add these lines to your "a" tag:

display: flex;
justify-content:center;
align-items:center;

answered Nov 06 '19 at 08:08

Icon is not showing vertically centered inside a circular tag

5 Answers5