无论css中的设备宽度如何，标头对齐中心

Question

我遇到了一个css问题，我需要将我的标题与中心对齐，而不管设备宽度如何，即标题应该出现在中心的任何设备。 在这里，我提供已经应用的CSS。

＆＃13;

＆＃13;

ul.nav.nav-tabs{
    	display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        margin: 0;
        padding: 0;
        padding-left: 10px;
    }
    
    ul.nav.nav-tabs li{
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        white-space: wrap;
    }
    ul.nav.nav-tabs li:last-child:after{
        content: "";
        background: url("");
    }
    ul.nav.nav-tabs li.active:after {
        background: url(../images/right-chevron-orange.png) center right -3px no-repeat;
        background-size: 16px;
    }
    ul.nav.nav-tabs li:after{
        content: "";
        background: url(../images/right-chevron.png) center right -3px no-repeat;
        width: 20px;
        background-size: 16px;
        position: absolute;
        height: 20px;
        right: 6px;
        top: 18px;
    }
    .nav-tabs>li{
    	width: auto;
    	height: auto;
    	margin-bottom: 5px;
    }

＆＃13;

<ul class="nav nav-tabs ng-scope" id="navigation-tabs" ng-controller="NavCtrl">
      <li class="increase_min_width active" ng-class="{active : navPath == 'basic'}">
        <div class="wrap">
          <span class="circle">1</span>
          <a style="text-decoration:none;">Basic Information</a>
        </div>
      </li>
      <li class="increase_min_width disabled" ng-class="{active : navPath == 'company',disabled:moveToCompanyFlg ==''}">
        <div class="wrap">
          <span class="circle">2</span>
          <a style="text-decoration:none;" class="company_information">Company Information</a>
        </div>
      </li>
      <li ng-class="{active : navPath == 'owner',disabled:moveToOwnerFlg ==''}" class="disabled">
        <div class="wrap">
          <span class="circle">3</span>
          <a style="text-decoration:none;">Owners Info</a>
        </div>
      </li>
    </ul>

＆＃13;

＆＃13;

＆＃13;

我试过设置margin：0 auto;和宽度：ul.nav.nav-tabs为100％，但它不起作用。我对css知之甚少。 请帮帮我......提前谢谢。

Answer 1

您的flexbox css不完整

在justify-content: center;

中添加.nav-tabs

Answer 2

将justify-content:center;添加到ul class .nav-tabs

检查此笔

`https://codepen.io/anon/pen/odRMWV`

Answer 3

在justify-content: center; CSS

中添加ul.nav.nav-tabs

ul.nav.nav-tabs{
    	display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        margin: 0;
        padding: 0;
        padding-left: 10px;
        width: 100%;
      justify-content: center;
        
    }
    
    ul.nav.nav-tabs li{
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        white-space: wrap;
    }
    ul.nav.nav-tabs li:last-child:after{
        content: "";
        background: url("");
    }
    ul.nav.nav-tabs li.active:after {
        background: url(../images/right-chevron-orange.png) center right -3px no-repeat;
        background-size: 16px;
    }
    ul.nav.nav-tabs li:after{
        content: "";
        background: url(../images/right-chevron.png) center right -3px no-repeat;
        width: 20px;
        background-size: 16px;
        position: absolute;
        height: 20px;
        right: 6px;
        top: 18px;
    }
    .nav-tabs>li{
    	width: auto;
    	height: auto;
    	margin-bottom: 5px;
    }

<ul class="nav nav-tabs ng-scope" id="navigation-tabs" ng-controller="NavCtrl">
      <li class="increase_min_width active" ng-class="{active : navPath == 'basic'}">
        <div class="wrap">
          <span class="circle">1</span>
          <a style="text-decoration:none;">Basic Information</a>
        </div>
      </li><br>
      <li class="increase_min_width disabled" ng-class="{active : navPath == 'company',disabled:moveToCompanyFlg ==''}">
        <div class="wrap">
          <span class="circle">2</span>
          <a style="text-decoration:none;" class="company_information">Company Information</a>
        </div>
      </li>
      <li ng-class="{active : navPath == 'owner',disabled:moveToOwnerFlg ==''}" class="disabled">
        <div class="wrap">
          <span class="circle">3</span>
          <a style="text-decoration:none;">Owners Info</a>
        </div>
      </li>
    </ul>