在jumbotron中垂直对齐glyphicons

Question

I have created a jumbotron and on the left I have some text on the left and some text with glyphicons to the right. While the text on the left is vertically aligned to the middle, the text on the right along with the glyphicon is below the jumbotron.

Here is the HTML code:-

<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>

This is the CSS code:-

.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

Check this out. As when you write the logout and settings as unordered list, it becomes another block of code. so it separates it from the text in p block.

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> 

if you are trying to make navigation bar, i wouldnt suggest this way, because this will cause more and more problems as you add stuff. look for navigation bar in bootstrap, there are easier and better ways