将标题对齐到中心

我在我的网站上遇到了一些问题。我从一个模板开始，我试图将它对齐到中间/中心，但我似乎无法对文本进行对齐，但我没有成功。我对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

将标题对齐到中心

回答

相关问题