Question

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

这是我的导航css：

＆＃13;

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;
	}

＆＃13;

这是我的HTML：

＆＃13;

<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>

＆＃13;

我试过

＆＃13;

nav img { vertical-align: middle; }

＆＃13;

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

Answer 1

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

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

您还应该从vertical-align: center中移除nav img，因为它无效。

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

将图像置于导航窗格中

3 个答案: