Make feather icon and text vertically aligned to the middle-CodePudding

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

HTML:

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

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

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

CSS:

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

CodePudding user response：

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/[email protected]/dist/feather.min.js"></script>

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

CodePudding user response：

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  style="display: flex; flex-direction: row; align-items: center; ">
      <i data-feather="circle"></i>Circle
    </a>

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