How to align fontawesome icons to the middle

Question

Hi I got a problem with aligning 3 icons. I want to align them but everytime I try something like this the first icon starts from the middle of the page but I want there the 2nd icon.

.item-icon {
  width: 10%;
  position: relative;
  display: inline-block;
  text-align: center;
  left: 50%;
  top: 50%;
}

.item-image {
  font-size: 70px;
}

<div class="plan">
  <div class="item-icon">
    <div class="item-image">
      <i class="far fa-lightbulb"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>
  <div class="item-icon">
    <div class="item-image">
      <i class="fas fa-code"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>
  <div class="item-icon">
    <div class="item-image">
      <i class="fas fa-upload"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Heretic Monkey, Mar 01 '18 at 21:56

ThS · Answer 1 · 2018-03-01T20:53:29.077

0

add these rules it's a little bit tricky though.

for div.plan

.plan {
    font-size 0:
}

for div.item-icon

.item-icon {
        width: 33.33333%;
        font-size: 1rem;
        text-align: center;
}

edited Mar 01 '18 at 20:53

answered Mar 01 '18 at 18:24

ThS

4,597
2
15
27

can you give an image describing what you are intending to do, that whould help a lot. – ThS Mar 01 '18 at 20:15
Yeah, I added the pic – Zerry Mar 01 '18 at 20:21
Nope, still nothing – Zerry Mar 01 '18 at 21:02
Did you give the .item-icon a display: inline-block; ? If no, try to add it. – ThS Mar 01 '18 at 21:10

Jon Jewett · Answer 2 · 2018-03-01T21:23:03.627

0

Try margin: auto instead of setting width. Should automatically adjust margins on each side to center it.

.item-icon {
    position: absolute;
    left: 50%;
    }

.item-image {
    position: relative;
    left: -50%;
    display: inline-block;
}
.plan {
    position: relative;
}

edited Mar 01 '18 at 21:23

answered Mar 01 '18 at 20:28

Jon Jewett

68
1
7

Try changing item icon to plan, which is your parent div – Jon Jewett Mar 01 '18 at 20:38
edited my answer. I tried it on my end and it worked. hopefully it'll work for you. – Jon Jewett Mar 01 '18 at 21:23

Zerry · Answer 3 · 2018-03-01T21:39:57.833

0

.plan {
  text-align: center;
}

.item-icon {
  display: inline-block;
  position: relative;
  width: 25%;
}

edited Mar 01 '18 at 21:39

answered Mar 01 '18 at 21:07

Zerry

59
6

Because it`s just css – Zerry Mar 01 '18 at 21:31
Then why is it a snippet – connexo Mar 01 '18 at 21:38

Przemysław Melnarowicz · Answer 4 · 2018-03-01T22:29:29.500

.plan {
    text-align: center;
    padding: 24px 0; // optional vertical padding
    margin: 0 -24px; // optional horizontal padding  offset
}

.item-icon {
    position: relative;
    display: inline-block;
    padding: 0 24px; // optional horizontal padding
}

https://codepen.io/themeler/pen/QQoGMa

You've tried to center icon inside icon container (.item-icon) but container has size of an icon, so it won't work as you expect. Also you tried positioning each icon 50% from left and top. That won't work either.

.plan should be your icon container with centered text and icons displayed as 'inline-block's so centering will affect them.

I've added additional padding to both .plan (vertical padding) and icon containers themselves (horizontal padding, to keep them separate).

How to align fontawesome icons to the middle

4 Answers4