Центрирование навигации изображения HTML

Question

Я хотел сосредоточить свои изображения/гиперссылками фотографии: http://i.stack.imgur.com/E051u.png

Это раздел нав моего HTML:

body{ 
 
    background-color:#163350; 
 
    background-repeat: repeat-x; 
 
    margin: 0; 
 
} 
 

 

 

 
header { 
 
    background-color:#ded7c2; 
 
    color:white; 
 
    text-align:center; 
 
    padding:5px; 
 

 
} 
 
h1{ 
 
    font-family:"Courier New", Courier, monospace; 
 
    font-size:30px; 
 
    color: #ffffff; 
 
    text-align:center; 
 
} 
 

 

 
h2{ 
 
    font-family:"Courier New", Courier, monospace; 
 
    font-size:30px; 
 
    color:#ffffff; 
 
    text-align:center; 
 
} 
 
p{ 
 
    font-family:"Trebuchet MS", Helvetica, sans-serif; 
 
    font-size:15px; 
 
    color:white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 

 
} 
 

 
li { 
 
    float: left; 
 

 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 

 
.active { 
 
    background-color: #4CAF50; 
 
} 
 

 

 
section { 
 
    width:400px; 
 
    float:left; 
 
    padding:10px; 
 
} 
 
footer { 
 
    font-family:"courier new"; 
 
    font-size:20px; \t 
 
    background-color:#ded7c2; 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px; 
 
    width: 100%; 
 
    height:37px; 
 
} 
 
img section{ 
 
    float:left; 
 
    text-align:center; 
 
} 
 
img section two{ 
 
    float:center; 
 
    text-align:center; 
 
} 
 
img section three 
 
float:right; 
 
text-align:center; 
 
} 
 

 
.menu { 
 
    width: 100%; 
 
    text-align:center; 
 
} 
 

 
google{ 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto 
 
    font-family:"Courier New", Courier, monospace; 
 
    font-size:12px; 
 
    color: #ffffff; 
 
    text-align:center; 
 
    line-height:30px; 
 
    background-color:#68594c; 
 
    height:690px; 
 
    width:100px; 
 
    float:left; 
 
    padding:0px; 
 
} 
 

 

 
iframe{ 
 
    padding: 200px; 
 
} 
 

 
h3{ 
 
    font-family:"Courier New", Courier, monospace; 
 
    font-size:12px; 
 
    color:#ffffff; 
 
    text-align:center; 
 
}

<div class= "container"> 
 
    <nav> 
 
    <ul> 
 

 
     <li><a href="home 3.html"><img src="images/home.png" alt="Home" ></a></li> 
 
     <li><a href="Menu.html"><img src="images/menu.png" alt="Menu"></a></li> 
 
     <li><a href="Events.html"><img src="images/event.png" alt="Blank"></a> 
 

 

 
    </ul> 
 
    </nav> 
 
    <section>

Любая помощь будет Великий. Спасибо! :) (он говорит, добавить больше деталей, но у меня нет ничего, чтобы писать .....)

Answer 1

удалить с плавающей ... попробуйте этот код: https://jsfiddle.net/Lyga3ft2/1/

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    text-align: center; 
} 

li { 
    display:inline-block; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #111; 
} 

Answer 2

Сделать div элемент с идентификатором inside_nav. вне ваших ul/li элементов. Теперь ваш код должен выглядеть так.

<nav> 
    <div id="inside_nav"> 
     <ul> 
      <li><a href="home 3.html"><img src="images/home.png" alt="Home" ></a></li> 
      <li><a href="Menu.html"><img src="images/menu.png" alt="Menu"></a></li> 
      <li><a href="Events.html"><img src="images/event.png" alt="Blank"></a> 
     </ul> 
    </div> 
</nav> 

Теперь внутри вашего CSS, добавьте margin: auto свойство к div элементу с идентификатором inside_nav.

#inside_nav { 
    margin: auto; 
} 

Ваши изображения/ссылки должны теперь выровняться по центру.