將標題對齊到中心

我在我的網站上遇到了一些問題。我從一個模板開始，我試圖將它對齊到中間/中心，但我似乎無法對文本進行對齊，但我沒有成功。我對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; 
}

來源

2015-11-14 TheWindBlows

你有可能contruct頭與HTML和CodePen上的CSS？ – AwesomeGuy

是的，請提供[示例]（http://stackoverflow.com/help/mcve） - 您可以使用[jsfiddle]（http://jsfiddle.net），[codepen]（http://codepen.io ）或任何其他類似的工具 - 它也將有助於解釋**你想要中心** ......在「標題」或元素本身的文本 – justinw

你可以發佈的HTML的最小部分和相關的css文件，你遇到這個問題 – Blip

添加這些auto保證金規則類：

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

你可以使用速記margin: 0 auto。

來源

2015-11-14 05:54:15 justinw

似乎沒有改變任何東西。 :( – TheWindBlows

@TheWindBlows - 是的，它是在黑暗中拍攝，需要你的代碼才能正確回答 – justinw

由於您沒有提供您的HTML代碼，所以我不知道哪一個是你的父母頭上的標籤

但在這裏，你可以嘗試這樣的事情。

裹你報頭中的標籤內的標籤說<header>或<div>

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

和在CSS限定<header>標籤寬度說（80％或1000像素）

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)*/ 
}

來源

2015-11-15 09:24:59

將標題對齊到中心

回答

相關問題