将文本放在图标下的字体真棒问题

Question

我正在尝试将我的 html 页面拆分为两个偶数 div，然后在两个 div 中放置一个超棒的大字体图标。我已经能够做到这一点。到目前为止一切顺利...

<div id='tradingOutageBtnWrapper'>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="addTradingOutageBtnWrap">
        <a id="addTradingOutageBtn" href="addTradingOutage.action">     
            <i class="fa fa-plus-circle fa-5x fa-pull-left fa-border"></i>
        </a>                    
    </div>

    <div id="viewTradingOutageBtnWrap">
        <a id="viewTradingOutageBtn" href="viewTradingOutage">      
            <i class="fa fa-binoculars fa-5x fa-pull-left fa-border"></i>
        </a>        
    </div>  
</div>

我遇到的问题是，当我在 font awesome 图标下添加一些文本时，文本并没有像我期望的那样在我的 font awesome 图标下居中。

<div id='tradingOutageBtnWrapper'>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="addTradingOutageBtnWrap">
        <a id="addTradingOutageBtn" href="addTradingOutage.action">     
            <i class="fa fa-plus-circle fa-5x fa-pull-left fa-border"></i>
            Add 
        </a>                    
    </div>

    <div id="viewTradingOutageBtnWrap">
        <a id="viewTradingOutageBtn" href="viewTradingOutage">      
            <i class="fa fa-binoculars fa-5x fa-pull-left fa-border"></i>
            View
        </a>        
    </div>  
</div>

我的 css 如下...

#tradingOutageBtnWrapper{
    text-align: center;
    height: 600px;
}
#addTradingOutageBtnWrap {
    display: inline-block;
    height: 100%; 
}    
#addTradingOutageBtn {
    font-size: 4em;
}

谁能帮我解决我必须做的事情才能使文本在我的图标下居中。

谢谢

Answer 1

这个怎么样。我不确定为什么你的两个 <a> 有不同的样式，所以我不得不删除它们（无论如何它们与你的原始屏幕截图不匹配）。另外，我不想在此 post 中包含实际的 FontAwsome，所以我伪造了一点。
无论如何，您明白了； inline-block代表<div>s和<a>s，block代表<i>s。

.fa.fa-plus-circle::before {
  content: '⊕';
}
.fa.fa-binoculars::before {
  content: '⛘';
}
.fa.fa-5x {
  font-size: 5em;
}
.fa.fa-border {
  border: .1em solid;
  border-radius: .1em
}
div {
  display: inline-block;
}
a {
  text-decoration: none;
  text-align: center;
  display: inline-block;
}
a i.fa {
  display: block;
  font-style: normal;
  text-align: center;
}

<br/>
<br/>
<br/>
<div id="addTradingOutageBtnWrap">
  <a id="addTradingOutageBtn" href="addTradingOutage.action">
    <i class="fa fa-plus-circle fa-5x fa-pull-left fa-border"></i>
    Add
  </a>
</div>

<div id="viewTradingOutageBtnWrap">
  <a id="viewTradingOutageBtn" href="viewTradingOutage">
    <i class="fa fa-binoculars fa-5x fa-pull-left fa-border"></i>
    View
  </a>
</div>
</div>

将文本放在图标下的字体真棒问题

font awesome issue placing text under icons

css

font-awesome