字体真棒图标未居中

Question

JS： http ： //jsfiddle.net/1cmtpnha/

我有这个：

  <div class="card-body">
   <div class="padding_5">
    <div class="icon-center">
      <i class="fa fa-twitter" aria-hidden="true"></i>
    </div>
   </div>
  </div>

padding_5仅包含填充CSS card-body是bootstrap 4

我尝试了这个：

[class*="icon-"] {
    display: inline-block;
    width: 100%;
}

.icon-center i {
  text-align: center;
}

和这个：

.icon-center {
  margin: auto;
  display: block;
}

都没有用。 这些是我在SO上看到的最受关注的回复。

我的代码有什么问题？

我希望它在卡体内水平居中。

这也不是引导程序。 我在没有CSS或卡体的单独页面上进行了测试。 还是同样的问题。

Answer 1

 .icon-center { text-align:center; } 

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="card-body"> <div class="padding_5"> <div class="icon-center"> <i class="fa fa-twitter" aria-hidden="true"></i> </div> </div> </div> 

Answer 2

您在这里有三个选择

1.父级： text-align: center

将text-align: center设置text-align: center为body 。

2.子级： display: block且text-align: center

将display: block设置为display: block .icon-center 。

3.子display: block ，设置width和margin: auto

设置display: block ， width: 20px and margin: auto to .icon-center 。

https://codepen.io/blackcityhenry/pen/WPexKp

Answer 3

只需添加text-align：center; 到父卡体

 .card-body{ border: 1px solid red; text-align: center; } .padding_5 { padding: 10px; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" /> <div class="card-body"> <div class="padding_5"> <div class="icon-center"> <i class="fa fa-twitter" aria-hidden="true"></i> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>