Fatal编程技术网
  • html/
  • Html 将列中的文本左对齐并居中对齐

Html 将列中的文本左对齐并居中对齐

html css twitter-bootstrap

Html 将列中的文本左对齐并居中对齐,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我在页面上有这样的标题 但我想这样排列它 怎么做？我的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.bootstrapc

我在页面上有这样的标题

但我想这样排列它

怎么做？我的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>
给你

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

<div class="col-md-3 header">
    <img src="eng.png" width="40px" height="40px" /> Admin
</div>
使用CSS伪类，这使您的工作更容易。这是你的

根据这些需要使用第一个子伪类 这里是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>
和线条高度和左右边距作为您的需要，以“li”的顶部栏为更好的结果。

我不清楚您的需要。你能不能请JSFIDLE itErm…如果我能JSFIDLE它，我会自己做的-对齐文本管理员和其他人..我甚至用油漆绘制所需的图像第二，基本上我想对齐管理员到左边和其他文本-在列的中心对齐。 
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;
}