Вертикально выровнять глификоны в джумботроне

Question

Я создал jumbotron, и слева у меня есть текст слева и текст с глификонами справа. В то время как текст слева выровнен по центру по вертикали, текст справа вместе с глификоном находится ниже jumbotron.

Вот 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>

если вы пытаетесь создать панель навигации, я бы не советовал так, потому что это будет вызывать все больше и больше проблем при добавлении материала. искать навигационную панель в начальной загрузке, есть более простые и лучшие способы