html - css : floating elements only 中棘手的水平居中

Question

我找不到在 float 元素中间正确对齐按钮的方法。

button {
  float:left;
}


header {
  overflow: hidden;
  background: #222;
}

header a, header label {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  line-height: 20px;
}

header a:hover, header label:hover { color: #aaa; }

header label {
  float: right;
  padding: 18px 20px;
  cursor: pointer;
}

header label:after {
  content: "\2261";
  font-size: 1.8em;
}

.logo {
  float: left;
  font-weight: bold;
  font-size: 1.5em;
}
  
nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s; 
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
   padding-bottom: 10px;
}
  
nav li {
  display: block;
  text-align: center;
}
  
nav a {
  padding: 10px;
  width: 100%;
}

#nav { display: none; }

#nav:checked ~ nav {
  max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}

@media only screen and (min-width: 700px) {
  
  header label { display: none; }
  
  nav {
    width: auto;
    max-height: none;
  }
  
  nav ul {
    padding: 0;
    padding-right: 10px;
  }
  
  nav li {
    display: inline-block;
    text-align: left;
  }
  
  header nav a {
    display: inline-block;
    padding: 20px 10px;
    width: auto;
  }
  
}

<header>

  <a class="logo" href="http://minimaldev.com">Minimal Menu</a>
  
  <input id="nav" type="checkbox">
  <label for="nav"></label>
  
  <button>centered button ?</button>
  
  <nav>
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </nav> 

</header>

另请参阅 codepen 上的示例

我尝试了显示表技巧，但它破坏了小型设备(响应式)上的导航栏行为。

我也试过this technique ，但我有同样的问题。

有什么想法吗？我考虑过使用 calc()，但找不到合适的公式。

Answer 1

我做了一些修改:

• 添加 text-align: center 到按钮的父元素
• 通过手动像素调整使按钮脱离顶部边缘(假设设计在 Logo 尺寸方面保持刚性，由于字体和填充大小的非响应性质，它不是响应式解决方案)。

它在 CodePen 中

HTML:

<header>

  <a class="logo" href="http://minimaldev.com">Minimal Menu</a>

  <input id="nav" type="checkbox">
  <label for="nav"></label>

  <button>centered button</button>

  <nav>
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </nav> 

</header>

CSS:

button{
  margin-top: 18px;
}

header {
  text-align: center;
  overflow: hidden;
  background: #222;
}

header a, header label {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  line-height: 20px;
}

header a:hover, header label:hover { color: #aaa; }

header label {
  float: right;
  padding: 18px 20px;
  cursor: pointer;
}

header label:after {
  content: "\2261";
  font-size: 1.8em;
}

.logo {
  float: left;
  font-weight: bold;
  font-size: 1.5em;
}

nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s; 
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
   padding-bottom: 10px;
}

nav li {
  display: block;
  text-align: center;
}

nav a {
  padding: 10px;
  width: 100%;
}

#nav { display: none; }

#nav:checked ~ nav {
  max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}

@media only screen and (min-width: 700px) {

  header label { display: none; }

  nav {
    width: auto;
    max-height: none;
  }

  nav ul {
    padding: 0;
    padding-right: 10px;
  }

  nav li {
    display: inline-block;
    text-align: left;
  }

  header nav a {
    display: inline-block;
    padding: 20px 10px;
    width: auto;
  }

}