Как выровнять меню по центру?

362

04 декабря 2017, 15:37

ul { 
    list-style: none; 
    margin: 0px; 
    padding-left: 0px; 
	margin-top: 30px; 
 
 
    .menu { 
	text-decoration: none; 
	background-color: rgba(255,255,255,0.0); 
	color: #000000; 
	padding: 10px; 
	font-family: Comic Sans, Comic Sans MS, cursive; 
	border-radius: 5px; 
	-moz-transition: all 0.3s 0.01s ease; 
	-o-transition: all 0.3s 0.01s ease; 
	-webkit-transition: all 0.3s 0.01s ease; 
	line-height:5px; 
	font-size: 25px; 
	padding-right: 35px; 
	padding-left: 35px;} 
 
    .menu:hover { 
	background-color: #D446FF;} 
 
	 
    .menu_li { 
	float: left;}

    <body> 
	    <div id="menu_conteiner"> 
            <nav id="menu_nav"> 
                <ul> 
				    <li class="menu_li"><a href="#m1" class="menu"> Меню_1 </a></li> 
				    <li class="menu_li"><a href="#m2" class="menu"> Меню_2 </a></li> 
				    <li class="menu_li"><a href="#m3" class="menu"> Меню_3 </a></li> 
                    <li class="menu_li"><a href="#m4" class="menu"> Меню_4 </a></li> 
					<li class="menu_li"><a href="#m5" class="menu"> Меню_5 </a></li> 
                </ul> 
            </nav> 
        </div> 
    </body>

Answer 1

Например вот так:

ul { 
  list-style: none; 
  margin: 0px; 
  padding-left: 0px; 
  margin-top: 30px; 
  text-align: center; 
} 
 
.menu { 
  text-decoration: none; 
  background-color: rgba(255, 255, 255, 0.0); 
  color: #000000; 
  padding: 10px; 
  font-family: Comic Sans, Comic Sans MS, cursive; 
  border-radius: 5px; 
  -moz-transition: all 0.3s 0.01s ease; 
  -o-transition: all 0.3s 0.01s ease; 
  -webkit-transition: all 0.3s 0.01s ease; 
  line-height: 5px; 
  font-size: 25px; 
  padding-right: 35px; 
  padding-left: 35px; 
} 
 
.menu:hover { 
  background-color: #D446FF; 
} 
 
.menu_li { 
  display: inline-block; 
}

<body> 
  <div id="menu_conteiner"> 
    <nav id="menu_nav"> 
      <ul> 
        <li class="menu_li"><a href="#m1" class="menu"> Меню_1 </a></li> 
        <li class="menu_li"><a href="#m2" class="menu"> Меню_2 </a></li> 
        <li class="menu_li"><a href="#m3" class="menu"> Меню_3 </a></li> 
        <li class="menu_li"><a href="#m4" class="menu"> Меню_4 </a></li> 
        <li class="menu_li"><a href="#m5" class="menu"> Меню_5 </a></li> 
      </ul> 
    </nav> 
  </div> 
</body>