Выровнять заголовок по центру независимо от ширины устройства в CSS - PullRequest
Новая
       6

Выровнять заголовок по центру независимо от ширины устройства в CSS

0 голосов
/ 24 мая 2018

Я застрял с проблемой 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>

Я попытался установить поле: 0 авто;и ширина: 100% для ul.nav.nav-tabs, но это не работает.У меня мало знаний в CSS.Пожалуйста, помогите мне с этим ... Спасибо заранее.

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Добавить justify-content:center; к классу ul .nav-tabs

Проверить эту ручку 

`https://codepen.io/anon/pen/odRMWV`
0 голосов
/ 24 мая 2018

Добавить justify-content: center; в ul.nav.nav-tabs 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;
        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>
0 голосов
/ 24 мая 2018

Ваш файл flexbox css неполон

Добавьте justify-content: center; к своему .nav-tabs

...