Question

我正在尝试将我的html页面分成两个偶数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>

我遇到的问题是，当我在字体真棒图标下添加一些文本时，文本不会像我期望的那样位于我的字体真棒图标下面。

<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>的不同风格，所以我不得不删除它们（它们与你原来的截图无法匹配）。另外，我不想在这篇文章中包含实际的FontAwsome，所以我假装了一点无论如何，你明白了; inline-block的{{1}}和<div>的{{1}}，<a>的{{1}}。

block

<i>

字体令人敬畏的问题将文本放在图标下

1 个答案: