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代码，因此我不知道哪一个是您的父代标记

但是你可以尝试这样的事情。

将标题标记包裹在标记内<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)*/
}

将标题对齐到中心

2 个答案: