使羽毛图标和文字垂直居中对齐

Question

代码到我的 HTML 页面 - https://jsfiddle.net/ghemachandra94/5rfymwgc/4/

我试图将图标旁边的文本与图标中间对齐，但样式显示不成功：flex and/or vertical-align: 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>

}

Answer 1

将vertical-align: middle替换为.feather-props中的align-items: center:

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>

Answer 2

只需将 display: flex; flex-direction: row; align-items: center; 添加到您的 a 标签中，它就会起作用。

.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

html

css

feather