Question

我正试图让我的标题以ul为中心。另一页建议使用overflow:hidden但是当我缩小窗口时，仍会出现第二个滚动条。

每次尝试时，li都与我的徽标不符。还尝试使用类'容器'margin: auto，但没有任何反应。

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}


/*Global styling */

.container {
  width: 100%;
  overflow: visible;
}

ul {
  margin: 0;
  padding: 0;
}


/*Header*/

header {
  background: #100806;
  color: #f2f2f2;
  min-height: 75px;
  border-bottom: #ffffff 3px solid;
  text-align: center;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
}

header li {
  display: inline-block;
  padding: 0 30px 10px 0;
  float: left;
}

header .center-logo img {
  width: 100px;
  padding-left: 30px;
  padding-right: 30px;
}

header nav span {
  float: left;
}

header nav span:first-child {
  padding-right: 50px;
  /* half the logo width */
  padding-top: 20px;
}

header nav span:last-child {
  padding-left: 50px;
  padding-top: 20px;
  /* half the logo width */
}

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #666666;
  font-weight: bold;
}

<header>
  <div class="container">
    <nav>
      <ul>
        <span>
          <li class="current"><a href="homePage.html"> Home</a></li>
          <li><a href="about.html"> Photography</a></li>
        </span>
        <div class="center-logo">
          <li><img src="https://placehold.it/100x50"></li>
        </div>
        <span>
          <li><a href="services.html"> Biography</a></li>
          <li><a href="contactus.html"> Contact Us</a></li>
        </span>
      </ul>
    </nav>
  </div>
</header>

Answer 1

您可以使用Flexbox。

header ul {
   display:flex
}

header li {
   flex: 1
}

强大的工具flex。

请参阅小提琴：https://jsfiddle.net/fo7v1253/1/

Answer 2

问题

float在list-items（li）

考虑删除列表项上声明的float规则，这将取消使用flex-box以外的典型方法水平居中对齐菜单项的任何尝试。

修复

text-align: center（关于包含元素）
display: inline-block（关于居中的嵌套元素）

由于在包含的父元素（在本例中为text-align: center）上声明了header规则，和列表项已包含已经被声明为inline-block项，list-item元素将在删除它们上声明的float规则后居中。

进一步关注：

无序（ul）或有序（ol）列表的唯一直接后代元素应该是list-items（li） - 除此之外的任何元素都将被视为无效标记。

代码段示范：（查看“整页”）

要点：

标记清理/简化
删除了无效的列表元素（直接后代）
样式改进（省略冗余规则，垂直居中导航）

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

/*Global styling */

.container {
  width: 100%;
  overflow: visible;
}

ul {
  margin: 0;
  padding: 0;
}

/*Header*/

header {
  background: #100806;
  color: #f2f2f2;
  min-height: 75px;
  border-bottom: #ffffff 3px solid;
  text-align: center;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
}

header li {
  display: inline-block;
  padding: 0 30px 0 0; /* remove the bottom padding */
  /* float removed */
  vertical-align: middle; /* additional */
}

/* Additional */

li.logo {
    padding-left: 50px;
    padding-right: 50px;
}

header nav > ul { /* using the "child combinator" here (>) so that this rule doesn't apply to any dropdown or sub-menus */
    padding: 10px 0 10px 0;
}

/*
header .center-logo img {
  width: 100px;
  padding-left: 30px;
  padding-right: 30px;
}

header nav span {
  float: left;
}

header nav span:first-child {
  padding-right: 50px;
  padding-top: 20px;
}

header nav span:last-child {
  padding-left: 50px;
  padding-top: 20px;
}
*/

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #666666;
  font-weight: bold;
}

<header>
  <nav>
    <ul>
      <li class="current"><a href="homePage.html"> Home</a></li>
      <li><a href="about.html"> Photography</a></li>
      <li class="logo"><img src="https://placehold.it/100x50"></li>
      <li><a href="services.html"> Biography</a></li>
      <li><a href="contactus.html"> Contact Us</a></li>
    </ul>
  </nav>
</header>

<!--

Change Log:

1) Invalid nested elements removed from list (span & div)
2) Superfluous ".container" containing element removed (as providing no tangible benefits)

-->

进一步参考的实用演示：

我不能把我的标题放在中间

2 个答案: