使羽毛图标和文本垂直对齐到中间
[英]Make feather icon and text vertically aligned to the middle
问题描述
Code to my HTML page - https://jsfiddle.net/ghemachandra94/5rfymwgc/4/
我的 HTML 页面的代码 - 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我正在尝试将图标旁边的文本与图标中间对齐，但 styles display: flex and/or vertical-align: middle没有运气
Need help in getting both of them aligned to the middle需要帮助以使它们都对齐到中间
HTML: HTML：
<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>
CSS: CSS：
.feather-props {
padding: 7px 10px 9px 10px;
padding-left: 23px;
background: transparent;
text-decoration: none;
display: flex;
width: 100%;
vertical-align: middle
}
2 个解决方案
解决方案1
2 2022-01-28 04:05:20
Replace vertical-align: middle with align-items: center in .feather-props :将vertical-align: middle替换为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>
解决方案2
0 2022-01-28 09:52:31
Just add display: flex; flex-direction: row; align-items: center;只需添加display: flex; flex-direction: row; align-items: center; 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.