在超大屏幕中垂直对齐字形

Question

我创建了一个超大屏幕，在左边有一些文本，右边有一些带字形的文本。虽然左侧的文本与中间垂直对齐，但右侧的文本与字形一起位于超大屏幕下方。

这里是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中寻找导航栏，有更简单更好的方法

在超大屏幕中垂直对齐字形

Vertically align glyphicons in a jumbotron

html

css

twitter-bootstrap

glyphicons