标题对齐中心而不考虑css中的设备宽度答案

【问题标题】：Header align center irrespective of device width in css标题对齐中心而不考虑css中的设备宽度
【发布时间】：2018-05-24 19:15:56
【问题描述】：

我遇到了一个 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的了解不多。请帮我解决这个问题...提前谢谢您。

【问题讨论】：

您能否在问题的 css 中添加图片绝对路径。要了解您正在尝试完成的设计

标签： html css responsive-design

【解决方案1】：

你的 flexbox css 不完整

将justify-content: center; 添加到您的.nav-tabs

【讨论】：

【解决方案2】：

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

检查这支笔

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

【讨论】：

【解决方案3】：

在ul.nav.nav-tabs CSS 中添加justify-content: center;

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>

【讨论】：