Make feather icon and text vertically aligned to the middle

Question

Code to my HTML page - https://jsfiddle.net/ghemachandra94/5rfymwgc/4/

I am trying to align the text beside the icon to middle of the icon, but no luck with the styles display: flex and/or vertical-align: middle

Need help in getting both of them aligned to the middle

.feather-props {  
  padding: 7px 10px 9px 10px;
  padding-left: 23px;
  background: transparent;
  text-decoration: none;
  display: flex;
  width: 100%;
  vertical-align: middle

<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <a class="feather-props">
      <i data-feather="circle"></i>Circle
    </a>

    <script>
      feather.replace()
    </script>
  </body>
</html>

}

score 2 · Accepted Answer · answered Jan 28 '22 at 04:05

Replace vertical-align: middle with align-items: center in .feather-props:

feather.replace()

.feather-props {  
  padding: 7px 10px 9px 10px;
  padding-left: 23px;
  background: transparent;
  text-decoration: none;
  display: flex;
  width: 100%;
  align-items: center;
}

<script src="https://unpkg.com/feather-icons@4.28.0/dist/feather.min.js"></script>

<a class="feather-props">
  <i data-feather="circle"></i>Circle
</a>

score 0 · Answer 2 · answered Jan 28 '22 at 09:52

Just add display: flex; flex-direction: row; align-items: center;, to your a tag, and it will work.

.feather-props {  
  padding: 7px 10px 9px 10px;
  padding-left: 23px;
  background: transparent;
  text-decoration: none;
  display: flex;
  width: 100%;
  vertical-align: middle
}

<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <a class="feather-props" style="display: flex; flex-direction: row; align-items: center; ">
      <i data-feather="circle"></i>Circle
    </a>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Make feather icon and text vertically aligned to the middle

2 Answers2