A Pen by Rplus.

css:-float-centering.markdown

css: float centering

Horizontally Centered Menus with no CSS hacks ( float center! )

Applicable timing:

• non-bgc/bgi on nav, just centering items~

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

A Pen by Rplus on CodePen.

License.

index.html

<div class="wrap">
  <nav>
    <a>111</a>
    <a>222</a>
    <a>333</a>
  </nav>
</div>

script.js

/*
 Horizontally Centered Menus with no CSS hacks
 ( float center! )
 
 # Applicable timing:
 
 * non-bgc/bgi on nav, just centering items~

 http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
 */

style.css

body {
  background-image: linear-gradient( to right, #fff, #fff 50%, #000 50%, #000);
}

.wrap {
  /* width: 100%; */
  overflow: hidden;
  padding: 10px 0;
  background-color: #900;
}

nav {
  float: left;
  position: relative;
  left: 50%;
  padding: 10px 0;
  background-color: #333;
  box-sizing: border-box;
}

a {
  float: left;
  position: relative;
  right: 50%;
  padding: 10px;
  background-color: pink;
}