字體真棒圖標未居中

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>