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

Question

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

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;
    }

<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>

我试过设置 margin:0 auto;和 width:100% 用于 ul.nav.nav-tabs 但它不起作用。我对CSS了解不多。 请帮助我...提前谢谢你。

Answer 1

您的 flexbox CSS 不完整

添加一个 justify-content: center; 到你的 .nav-tabs