在导航窗格中居中图像

Question

所以我是 html/css 和这个网站的新手，但我无法为我的页面布置我的样式 sheet。这是我的导航窗格的图片：http://i.stack.imgur.com/88rwB.png 我想将图片（也属于超链接列表）居中，但无论我尝试了多少技巧，我似乎都无法弄清楚如何。

这是我的导航 css:

nav {
 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:778px;
    width:100px;
    float:left;
    padding:0px; 
}
nav img
 { vertical-align: center; }
nav ul{
 list-style-type:none;
 }

这是我的 html:

<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="Blank.html"><img src="images/blank.png" alt="Blank"></a></li>
<li><a href="Blank.html"><img src="images/blanktwo.png" alt="Blank"></a></li>
<li><a href="Blank.html"><img src="images/blank.png" alt="Blank"></a></li>

</ul>
</nav>

我试过了

nav img { vertical-align: middle; }

但它并没有改变任何东西。我做错了什么？

Answer 1

默认情况下，大多数浏览器为 ul 元素提供左填充。你应该可以说：

nav ul {
    list-style-type: none;
    padding: 0;
}

您还应该从 nav img 中删除 vertical-align: center，因为那是无效的。

Answer 2

如果删除填充并将 text-align: center; 设置为 ul，它将使图像居中

查看我的codepen http://codepen.io/anon/pen/bZObXO

Answer 3

我正在使用您在评论中发布的图片作为基础提交我的答案：http://i.stack.imgur.com/k8thl.png

这是一个 jsfiddle，您可以在其中查看我的代码：https://jsfiddle.net/4kgjw11s/

您的 HTML 代码未更改，但我对 CSS:

进行了更改

nav {
  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:778px;
  width:100px;
  float:left;
  padding:0px; 
}
nav > ul {
  position: relative;
  padding: 0px;
  margin: 0px;
  list-style-type:none;
}
nav > ul > li {
  text-align: right;
}
nav > ul > li > a {
  margin-right: -25px;
}
nav > ul > li > a >img {
  width: 50px;
  height: 50px;
}

图像尺寸是占位符，当您将它们替换为实际图像尺寸时，取 width，将其除以 2，然后将其设置为负数 margin-right 以获得 nav > ul > li > a

在导航窗格中居中图像

Centering an image in a navigation pane

html

css

nav