html - 在 CSS 中定位链接

Question

编辑:这是一个 jsFiddle:http://jsfiddle.net/7hSny/

我正在尝试在 CSS 中定位带有图片的链接。这是我喜欢它的预览:

preview http://piclair.com/data/odjkf.jpg

Home、Campagne 等单词需要在菜单栏中居中显示。 HTML 现在可能很难看，我已经尝试了很多方法，但我无法正确定位它。

这是我的 HTML:

<div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="img/Menu_Home_Selected.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>

这是 CSS:

#navigation{
background-image: url(img/Navbar.png);
background-repeat: no-repeat;
width:955px;
color: #FFF;
float: left;
border:1px solid blue;
}

#current_page {
margin: -22 0 0 0px; 
width:164px;
min-height: 124px;
background-image: url(img/Selected.png);
background-repeat: no-repeat;
}

#nav {
min-height: 28px;
margin: 5 0 0 -14px;
}

#nav ul, li {
list-style: none;
}

#nav li {
width:164px;
}

.navlink p (
display: block;
margin: 35 35 35 35px;
}

现在看起来像这样: preview http://piclair.com/data/mdc5z.jpg

Answer 1

您的标记有几处可以优化(正如您提到的，“丑陋”)。不要在可以使用网络颜色的地方使用图像。对于图像文本，将图像所代表的实际文本放入 html 中，并将 background-image 用于 css 中的实际 jpg。垂直居中并不像它应该的那样容易(除非你使用表格单元格)，但在很多情况下你可以使用顶部/底部填充或行高。

Here's a fiddle with a few things updated .希望这会有所帮助。

另外，看看这个 blog post具有各种垂直对齐方法。如果我的不行，其中一个应该对你有用。