在jumbotron中垂直對齊glyphicons

Question

我創建了一個jumbotron，在左邊我有一些文本在左邊，一些文字在右邊有glyphicons。 雖然左側的文字垂直對齊中間，但右側的文字與字形圖一起位於超大屏幕下方 。

這是HTML代碼： -

<div class="jumbotron" >
        <div class="container-fluid text-left" style="padding-left:4px;">

            <p style="color:#f8921e">Text</p>

            <ul style="list-style-type:none ">
                <li><a class="glyph" href="#"> <span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                <li><a class="glyph" href="#"> <span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
            </ul>
        </div>
     </div>

這是CSS代碼： -

.jumbotron
    {
        width:100%;
        color: #f8921e;
        top:0;
        padding:20px;
        z-index:9;
        position:fixed;
        height:10%;
        background-color:black;

    }
.glyph
    {
        margin-right:20px;
        font-size:100%;
        color:#f8921e;
        float:right;
        padding-top:10px;
        display:block;
        text-align:center;

    }

Answer 1

看一下這個。 當您將注銷和設置寫為無序列表時，它將成為另一個代碼塊。 所以它將它與p塊中的文本分開。

https://jsfiddle.net/2ebc317L/

 .jumbotron { width:100%; color: #f8921e; top:0; padding:20px; z-index:9; position:fixed; height:10%; background-color:black; } .glyph { margin-right:30px; font-size:100%; color:#f8921e; float:right; display:block; text-align:center; } 

 <div class="jumbotron" > <div class="container-fluid text-left" style="padding-left:4px;"> <p style="color:#f8921e">Text <a class="glyph" href="#"> <span class="glyphicon glyphicon-cog"></span> Settings</a> <a class="glyph" href="#"> <span class="glyphicon glyphicon-log-out"></span> Logout</a> </p> </div> </div> 

如果你想制作導航欄，我不建議這樣做，因為這會在你添加東西時引起越來越多的問題。 在bootstrap中尋找導航欄，有更簡單，更好的方法