我想使用 i 标签将 fa 置于 div 的中心，但我对如何做到这一点有点无能为力。有什么帮助吗？
我是新来的。
谢谢
示例 html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#lock-cirle {
border: solid 2px #9f070a;
border-radius: 100%;
width: 100px;
height: 100px;
margin: 0px auto;
margin-top: 5%;
margin-bottom: 5%;
}
#lock-icon{
font-size: 50px;
color: #9f070a;
margin: 27%;
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center">
<div id="lock-cirle" style="background-color: yellow;">
<i class="fa fa-lock" id="lock-icon" style="background-color: green;"></i>
</div>
</div>
</body>
</html>
最佳答案
设置text-align:center;到父 div #lock-cirle , 像这样
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#lock-cirle {
border: solid 2px #9f070a;
border-radius: 100%;
width: 100px;
height: 100px;
margin: 0px auto;
margin-top: 5%;
margin-bottom: 5%;
text-align:center;
}
#lock-icon{
font-size: 50px;
color: #9f070a;
margin: 27%;
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center">
<div id="lock-cirle" style="background-color: yellow;">
<i class="fa fa-lock" id="lock-icon" style="background-color: green;"></i>
</div>
</div>
</body>
</html>因为 <I>元素默认是内联的，text-align CSS 属性描述内联内容如何对齐
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
关于html - 如何在div中居中<i>标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45901801/