html - 如何在固定高度的<i>标签中将图标与中心对齐

This question already has answers here:

How do I vertically center text with CSS? [duplicate]
                                
                                    （38个答案）
                                
                        
                        
                            How do I vertically align text in a div?
                                
                                    （30个答案）
                                
                        
                        
                            Fontawasome vertical icon align
                                
                                    （4个答案）
                                
                        
                        
                            How to center an element horizontally and vertically
                                
                                    （21个回答）
                                
                        
                                2年前关闭。
            
                    
我尝试添加一些padding-top，但是有没有办法使它自动化？我找不到任何类似的问题。

i{
  background: red;
  height: 100px;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

最佳答案

希望这可以帮助你。请检查以下代码段。

i{
  background: red;
  height: 100px;
  position: relative;
}

i:before {
position: relative;
top: 50%;
    transform: translateY(-50%);
    display: block;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

关于html - 如何在固定高度的<i>标签中将图标与中心对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49796802/