Tricky horizontal center in css : floating elements only

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><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>

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.

Do you really need the `float: left` on `button`? Have you tried the `transform` trick? — Harry, Nov 01 '15 at 15:56
I don't see where you're trying to center the button, to be honest. — Mr Lister, Nov 01 '15 at 16:07

Ryan Andrew Chudd · Answer 1 · 2015-11-02T00:06:53.950

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><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;
  }

}

This answer would have been so much better if it also handled the hamburger properly... — Mr Lister, Nov 01 '15 at 16:29
Nice effort, still a little bugged on responsive mode : the button moves when you click on the hamburger. +1 for the nice try. — bdavidxyz, Nov 01 '15 at 18:06
I changed the vertical alignment to make it relative to the top of the header so the button wouldn't jump down in the case of the hamburger menu. Otherwise it's still just `text-align: center` in the parent that does the trick horizontally. — Ryan Andrew Chudd, Nov 02 '15 at 00:08

Tricky horizontal center in css : floating elements only

1 Answers1