CSSのflexを使ったli要素で、やや古いブラウザにも対応させたセンタリングnaviボタンの実装サンプルです。flexbox関連のプロパティはいろいろ変遷したため、現在の「display:flex」をやや古めのブラウザに対応させるのは難しいものがあります。ここでは、ベンダープレフィックスやjustify-contentプロパティの代替えを使うなどして、新しいブラウザからやや古めのブラウザまで動作をほぼ統一させるサンプルを作ってみました。

動作は、Safari5、Google Chrome46、Firefox48などの古めのブラウザと、新しいブラウザのInternet Explorer11、Microsoft Edge40、Safari11、Google Chrome61、Firefox55で確認しました。flexはliの親要素ulに使っています。

flexによるnaviボタン（１）　ボタン（幅93px）5個

全体幅539px（赤線）、フォント15px、最大日本語で5文字、英文大文字のみで7文字、英文小文字のみで8文字

flexによるnaviボタン（２）　ボタン（幅93px）6個

全体幅646px（赤線）、フォント15px、最大日本語で5文字、英文大文字のみで7文字、英文小文字のみで8文字

flexによるnaviボタン（３）　ボタン（幅114px）5個

全体幅646px（赤線）、フォント15px、最大日本語で6文字、英文大文字のみで8文字、英文小文字のみで10文字

flexによるnaviボタン（４）　ボタン（幅可変、最小70px）5個

最小の全体幅600px（赤線、600pxを超える場合調整）、フォント15px

（１）のhtmlソース

<nav>
	<ul class="main-nav flex">
		<li><a href="#">HOME</a></li>
		<li><a href="#">ABCDEFG</a></li>
		<li><a href="#">abcdefgh</a></li>
		<li><a href="#">東京営業所</a></li>
	</ul>
</nav>

（１）のCSSソース

.flex {
	display : -webkit-box;
	display : -ms-flexbox;
	display : -webkit-flex;
	display: flex;
	}
.main-nav {
	width:539px;
	margin:10px auto 0 auto;
	border:1px solid red;
	padding:0;
	}	
.main-nav li {
	list-style-type:none;
	margin-left:4px;
	}
.main-nav a {
	box-sizing: border-box;
	width:93px;
	margin: 5px;
	border-radius: 5px;
	background: #26a;
	font-size:15px;
	color: #fff;
	display: block;
	padding: 6px 0 4px 0;
	text-align: center;
	text-decoration: none;
	}
.main-nav a:hover {
	background: #6af;
	color:#15b;
	}