Question

我在页面上有这样的标题 enter image description here

但我想像这样对齐它 enter image description here

怎么做？我的HTML代码看起来像这样

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $("#mytab a:last").tab("show")
            });
        </script>
        <style>
            .blackie {
                background: black;
                color: white;
            }
            .header {
                font-size: 25px;
            }
            .column {
                text-align: center;
            }
            .line {
                border-right: 1px solid white;
            }
        </style>
    </head>
    <body>
        <div class="row blackie">
            <div class="col-md-1">
                <img src="eng.png" width="40px" height="40px"/>
            </div>
            <div class="col-md-2 header">Admin</div>
            <div class="col-md-1 col-md-offset-3">
                <span class="line"></span>
            </div>
            <div class="col-md-2">
                email
            </div>
            <div class="col-md-1">
                <span class="line"></span>
            </div>
            <div class="col-md-1 column">
                <span class="logout">
                    <a href="#">Log out</a>
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs" role="tablist" id="mytab">
                    <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Liabilities</a></li>
                    <li><a href="#tab2" role="tab" data-toggle="tab">Events</a></li>
                    <li><a href="#tab3" role="tab" data-toggle="tab">Reports</a></li>
                    <li><a href="#tab4" role="tab" data-toggle="tab">Admin</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="tab-content">
                    <div id="tab1" class="tab-pane active">
                        <p>Liabilities</p>
                    </div>
                    <div id="tab2" class="tab-pane">
                        <p>Events</p>
                    </div>
                    <div id="tab3" class="tab-pane">
                        <p>Reports</p>
                    </div>
                    <div id="tab4" class="tab-pane">
                        <p>Admin</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

您在http://jsfiddle.net/7ky948j3/2/embedded/result/

你有填充问题，每个col-md类都有填充左边15px，第一列中的图像小于col-md-1类的宽度所以它将admi推向右边。如果您在同一列中添加图像和管理员，问题将得到解决

<div class="col-md-3 header">
    <img src="eng.png" width="40px" height="40px" /> Admin
</div>

Answer 2

使用CSS Pseudo类，让您的工作变得轻松。这是你的output

使用first-child Pseudo类来满足这些需求这里是html

 <div class="row blackie">
            <div class="col-md-1 col-sm-1">
                <img src="eng.png" width="40px" height="40px"/>
            </div>
     <div class="col-md-11 col-sm-11 col-xs-11"> <!-- cols depends upon ur nees" -->
             <ul class="main-head">
                     <li>
                         <a href="">Admin</a>
                     </li>
                 <li>
                     <a href="">Email</a>
                 </li>
                 <li>
                     <a href="">logout</a>
                 </li>
         </ul>
             </div>
</div>

和css

ul.main-head{
    display:inline-block;
    width:100%;
    padding:0px;
    margin:0px;
    vertical-align:middle;
}
ul.main-head:after{
 clear:both;
    content:" " ;
    display:table;
}

ul.main-head li{
    float:right; //floats every element to right side
    text-align:right;
    list-style:none;
}
ul.main-head li:first-child{
    float:left; //make the first element to float left
}
ul.main-head li a{
    color:#fff;
}

和行高和左右边距作为您需要的＆＃39; li＆＃39;顶栏的效果更好。

对齐列中和中心的文本

2 个答案: