Struggling to center a button among floating elements? Look no further!
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>Check out the example on codepen
Attempts using display-table or the technique from this answer didn't work for responsive design. Any suggestions? Maybe calc() could solve it, but the right formula remains elusive.