css中的棘手的水平中心：浮动元素只有

Question

我找不到一种方式来正确地对齐浮动元素中的一个按钮。

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到撞着键关闭用手动像素调整顶部边缘按钮
• 的父元素（假设设计在标志方面保持刚性大小，因为字体和填充大小的非响应性质，它不是一个响应式解决方案）。

这是在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; 
    } 

}