Выравнивание заголовка к центру

Question

У меня проблемы с заголовком на моем веб-сайте. Я начал с шаблона, и я пытаюсь выровнять его по центру/центру, но я не могу показаться, что он имеет класс выравнивания текста, но я не имел успеха. Я по-прежнему новичок в CSS и занимаюсь этим в течение последних нескольких часов. Есть идеи? Большое спасибо.

/*-- Main navigation --*/ 

.navbar-header{ 
    width: 20%; 
    vertical-align: middle 
    position: relative; 
    z-index: 9999; 
} 

a.navbar-brand{ 
    background: #eb2c33; 
    padding: 4px 10px; 
} 

.navbar{ 
    border-radius: 0; 
    border: 0; 
    margin-bottom: 0; 
} 


.navbar-nav>li>a{ 
    padding: 21px 30px; 
    font-weight: 600; 
} 

.navbar-toggle{ 
    background: #eb2c33; 
    border-radius: 0; 
    margin-right: 5px; 
} 

.navbar-toggle .icon-bar{ 
    background: #fff; 
} 

ul.nav.navbar-nav li{ 
    background-color: rgba(0,0,0,.8); 
} 

ul.navbar-nav li a{ 
    color: #fff; 
} 

ul.navbar-nav li a:hover, 
ul.navbar-nav li a:focus{ 
    background: #eb2c33; 
    color: #fff; 
} 

ul.navbar-nav > li.active{ 
    background: none; 
} 

ul.navbar-nav li.active > a, 
ul.navbar-nav > li.active.dropdown.open{ 
    background: rgba(255, 4, 4, 0.75); 
} 

ul.navbar-nav li.active > .dropdown-menu > li.active > a{ 
    color: #eb2c33; 
} 

ul.navbar-nav li.search{ 
    margin-left: 10px; 
    background: #eb2c33; 
} 


.navbar-nav .dropdown-menu{ 
    left: 0; 
    right: auto; 
} 

.dropdown-menu * { 
    width: 100%; 
    -webkit-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
} 

.navbar-nav .dropdown-menu{ 
    background: none; 
    border: 0; 
    box-shadow: none; 
    min-width: 240px; 
    display: block; 
    opacity: 0; 
    z-index:1; 
    visibility:hidden; 
    -webkit-transform: scale(.8); 
    -moz-transform: scale(.8); 
    -ms-transform: scale(.8); 
    -o-transform: scale(.8); 
    transform: scale(.8); 
    -webkit-transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(.43, .26, .11, .99); 
    -moz-transition: visibility 500ms, opacity 500ms, -moz-transform 500ms cubic-bezier(.43, .26, .11, .99); 
    -o-transition: visibility 500ms, opacity 500ms, -o-transform 500ms cubic-bezier(.43, .26, .11, .99); 
    -ms-transition: visibility 500ms, opacity 500ms, -ms-transform 500ms cubic-bezier(.43, .26, .11, .99); 
    transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(.43, .26, .11, .99); 
} 

.navbar-nav .dropdown:hover .dropdown-menu { 
    opacity: 1; 
    visibility:visible; 
    color: #777; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
} 

.navbar-nav .dropdown-backdrop { 
    visibility: hidden; 
} 

.navbar-nav .dropdown-menu li{ 
    padding: 10px 20px 0; 
} 

.navbar-nav .dropdown-menu li:first-child{ 
    border-radius: 2px 2px 0 0; 
} 

.dropdown-menu li:last-child{ 
    border-radius: 0 0 2px 2px; 
} 

.dropdown-menu>li>a{ 
    font-size: 14px; 
    padding: 10px 0; 
    border-bottom: 1px solid rgba(255,255,255,.1); 
} 

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, 
.dropdown-menu>li.active>a{ 
    background: none !important; 
    color: #eb2c33 !important; 
} 

.nav .open>a, .nav .open>a:hover, 
.nav .open>a:focus{ 
    background: transparent; 
    border:0; 
} 

Answer 1

Добавьте эти auto правила маржинальных к классу:

.navbar-header{ 
    width: 20%; 
    vertical-align: middle 
    position: relative; 
    z-index: 9999; 
    margin-left: auto; 
    margin-right: auto; 
} 

Вы можете использовать сокращенную margin: 0 auto.

Answer 2

Как вы не предоставили свой HTML код, так что я понятия не имею, какой из них ваш родитель голова тег

Но здесь вы можете попробовать что-то вроде этого.

Wrap вы заголовок теги внутри тега сказать <header> или <div>

<header> 
    <!-- Your rest of head tags --> 
</header> 

и CSS определяют <header> ширину тегов говорят (80% или 1000px)

header{ 
    width:80%; 
    margin:0px auto; /*This will set your maring top & bottom to 0px and left & right to auto (It will automatically adjust margin and center you content)*/ 
}