如何中心<i>标记在一个格

我想用一个标记在div上居中，但我对于如何做到这一点有点无知。任何帮助？如何中心<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>

来源

2017-08-27 iamcoder

设置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> eleme NT是内嵌在默认情况下，和text-align CSS属性描述内容如何直列对准

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

来源

2017-08-27 05:01:14

你能解释一下为什么吗？ – iamcoder

@iamcoder Cuz 元素默认为内联，而文本对齐CSS属性描述内嵌内容如何对齐 –

1

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

纠正你的＃锁定图标CSS如上因为要在到中心发DIV。

来源

2017-08-27 05:03:03

+0

不工作仍不居中先生 – iamcoder

如何中心<i>标记在一个格

回答

相关问题