Html 如何居中<；i>；在div中添加标签_Html_Css_Twitter Bootstrap 3

Html 如何居中<；i>；在div中添加标签

html css twitter-bootstrap-3

Html 如何居中<；i>；在div中添加标签,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我想用I标签将一个足总放在一个分区的中心，但我不知道怎么做。有什么帮助吗我是新来的谢谢示例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-cirl

我想用I标签将一个足总放在一个分区的中心，但我不知道怎么做。有什么帮助吗

我是新来的

谢谢

示例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>


#锁圈{
边框：实心2px#9f070a；
边界半径：100%；
宽度：100px；
高度：100px；
保证金：0px自动；
利润率最高：5%；
利润底部：5%；
}
#锁定图标{
字体大小：50px；
颜色：#9f070a；
利润率：27%；
}

设置

文本对齐：居中

到父div

#lock cirle

，如下所示


#锁圈{
边框：实心2px#9f070a；
边界半径：100%；
宽度：100px；
高度：100px；
保证金：0px自动；
利润率最高：5%；
利润底部：5%；
文本对齐：居中；
}
#锁定图标{
字体大小：50px；
颜色：#9f070a；
利润率：27%；
}

如上所述更正#锁定图标CSS，因为您希望将fa置于div的中心。

您能解释一下原因吗？@iamcoder Cuz元素默认是内联的，text align CSS属性描述内联内容的对齐方式

#lock-icon{
       font-size: 50px;
       color: #9f070a;
       margin: 27%;
       text-align: center;
    }