居中导航图像 html

Centering navigation images html

我想将我的 images/hyperlinked 图片居中: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; 
  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>

任何帮助都会很棒。谢谢! :) (它说添加更多细节,但我没有什么可写的......)

删除浮动...试试这个代码: 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;
}

创建一个 ID 为 inside_navdiv 元素。在 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 属性 添加到 ID 为 inside_nav.

div 元素
#inside_nav {
    margin: auto;
}

您的 images/links 现在应该居中对齐。