Tricky horizontal center in css : floating elements only - html

Question

I can't find a way to properly align a button in the middle of floating elements.
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>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
</header>
See example also on codepen
I tried the display-table trick, but it breaks the navbar behaviour on small device (responsive).
I also tried this technique , but I have the same problem.
Any idea ? I thought about using calc(), but I can't find the right formula.

Answer 1

I made a couple of edits:
added text-align: center to the parent element of the button
bumped the button off the top edge with manual pixel adjustments (assuming the design stays rigid in terms of logo size, it is not a responsive solution because of the non-responsive nature of font and padding sizing).
Here it is in a 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>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</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;
}
}