Question

我想水平和垂直居中导航栏。整个ul应该在外部div中水平居中，而li文本应该是垂直居中的。感觉就像我尝试了一切。

这是我的HTML

 <section class="navigation" ng-controller="NavController">
    <div class="nav-container">
        <nav>
                <ul class="nav-list" ng-repeat="navitem in navitems">
                    <li>
                        <a href="#!">{{navitem.title}}</a>
                    </li>
                </ul>
        </nav>
    </div>
</section>

我的css

body,
html {
    height: 100%;
    margin: 0 auto;
}



.navigation {
 width: 100%;
 height: 7%;
 background: #262626;
 color: white;
} 
.navigation a {
color: white;
text-decoration: none;
font-weight: 300; 
}  
.navigation a:hover {
 color: #ffffff;
 text-decoration: none;
 }

.nav-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0px 0px;
 height: 100%; 
 }
.nav-dropdown {
 display: none;
 position: absolute;
 left: 0;
 width: 100%;
 z-index: 1;
 box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
 }
 nav {
 float: right;
 position: relative;
 display: inline-block;
 font-size: .9em;
 text-transform: uppercase;
 font-weight: 700;
 height: 100%; 
 }
 nav ul {
 list-style: none;
 text-align: left;
 margin: 0;
 padding: 0px;
 height: 100%; 
 display: inline-block; 
 }
 nav ul li {
 float: none;
 position: relative;
 height: 100%; 
 }
 nav ul li a {
 display: block;
 color: #a9a9a9;
 padding: 0 20px;
 background: #262626;
 height: 100%; 
 }
 nav ul li a:hover,
 nav ul li a:focus,
 nav ul li a:active {
 text-decoration: none;
 color: #ffffff;
 }
 nav ul li > a:hover {
  background: #519ae3;
  color: #ffffff;
 }
 nav ul li > a:not(:only-child):after {
 padding-left: 4px;
 content: ' ▾';
 }

Answer 1

要使位于右侧的浮球居中，您需要通过将左边距边缘设置为-50％来对此进行反击。

left: -50%;

以下是您现有代码的用语：

nav {
  float: right;
  left: -50%;
  position: relative;
  display: inline-block;
  font-size: .9em;
  text-transform: uppercase;
  font-weight: 700;
  height: 100%;
}

这是您的全新HTML和CSS。 CodePen example

HTML

<section class="navigation" ng-controller="NavController">
  <div class="nav-container">
    <nav>
      <ul class="nav-list" ng-repeat="navitem in navitems">
        <li>
          <a href="#!">{{navitem.title}}</a>
        </li>
      </ul>
    </nav>
  </div>
</section>

CSS

body,
html {
  height: 100%;
  margin: 0 auto;
}

.navigation {
  width: 100%;
  height: 7%;
  background: #262626;
  color: white;
}

.navigation a {
  color: white;
  text-decoration: none;
  font-weight: 300;
}

.navigation a:hover {
  color: #ffffff;
  text-decoration: none;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 0px;
  height: 100%;
}

.nav-dropdown {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

nav {
  float: right;
  left: -50%;
  position: relative;
  display: inline-block;
  font-size: .9em;
  text-transform: uppercase;
  font-weight: 700;
  height: 100%;
}

nav ul {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0px;
  height: 100%;
  display: inline-block;
}

nav ul li {
  float: none;
  position: relative;
  height: 100%;
}

nav ul li a {
  display: block;
  color: #a9a9a9;
  padding: 0 20px;
  background: #262626;
  height: 100%;
}

nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
  text-decoration: none;
  color: #ffffff;
}

nav ul li > a:hover {
  background: #519ae3;
  color: #ffffff;
}

nav ul li > a:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}

Answer 2

我修复了您的问题，您可以在下面的代码段中看到它。

＆＃13;

body,
html {
  height: 100%;
  margin: 0 auto;
}

.navigation {
  width: 100%;
  height: 7%;
  background: #262626;
  color: white;
}

.navigation a {
  color: white;
  text-decoration: none;
  font-weight: 300;
}

.navigation a:hover {
  color: #ffffff;
  text-decoration: none;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 0px;
  height: 100%;
}

.nav-dropdown {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

nav {
  position: relative;
  font-size: .9em;
  text-transform: uppercase;
  font-weight: 700;
  height: 100%;
}

nav ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0px;
  height: 100%;
}

nav ul li {
  float: none;
  display: inline-block;
  position: relative;
  height: 100%;
}

nav ul li a {
  display: block;
  color: #a9a9a9;
  padding: 0 20px;
  background: #262626;
  height: 100%;
}

nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
  text-decoration: none;
  color: #ffffff;
}

nav ul li > a:hover {
  background: #519ae3;
  color: #ffffff;
}

nav ul li > a:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}

＆＃13;

<section class="navigation" ng-controller="NavController">
  <div class="nav-container">
    <nav>
      <ul class="nav-list" ng-repeat="navitem in navitems">
        <li>
          <a href="#!">{{navitem.title}}</a>
        </li>
      </ul>
    </nav>
  </div>
</section>

＆＃13;

注意：当您想将某些项目置于容器中心时，最常见的方法之一是将text-align:center设置为容器并更改其子项的显示（您想要的项目）中心连续）到display:inline-block

Css导航栏中心问题

2 个答案: