'Make feather icon and text vertically aligned to the middle

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>

}

htmlcssfeather


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Caleb Gross

Related Questions