Css Menü ortalayamıyorum

Arkadaşlar burda menu linki var aynısını kullanıyorum ama çözünürlüğe göre yazıların ortalanmasını istiyorum.
Float:left; olduğu için text-align:center; işe yaramıyor.

marign falan kullandınmı

.topnav a {
display: inline-block;
color: #f2f2f2;
padding: 14px 3%;
text-decoration: none;
font-size: 17px;
}

+


<div class="topnav" id="myTopnav"><center>
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></center>
</div>


css i böyle yapınca ve div içine "<center>" ekleyince halloldu.

Konu kapatılabilir.