0

请查看以下 jsFiddle 并进行适当更改。我基本上希望文本完全位于图像高度的中间。

http://jsfiddle.net/e7AV9/1/

4

4 回答 4

3

您可以将其设置为背景图像并将其居中，然后像这样添加一些左侧填充http://jsfiddle.net/e7AV9/5/

于 2012-05-31T00:36:18.680 回答
1

您也可以将图像直接放在 HTML 中并以这种方式设置样式：http: //jsfiddle.net/e7AV9/10/

这是CSS:content的问题：

我觉得我们根本不应该使用内容声明。它向页面添加内容，而 CSS 旨在向页面添加演示文稿，而不是内容。因此，我觉得如果你想动态生成内容，你应该使用 JavaScript。CSS 是这项工作的错误工具。

于 2012-05-31T00:47:02.543 回答
1

我偏爱绝对定位。

CSS

* {
    font-family: Verdana;
    font-size: 10px;
}

nav > ul li:nth-child(2) a:before {
    position: absolute;
    top: 9px;
    left: -2px;
    content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}

nav a {
    color: #626262;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    width: 150px;
    display: inline-block;
}

nav ul li {
    position: relative;
    display: inline-block;
    list-style: none;
}

HTML

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="forum.php">Community</a></li>
    </ul>
</nav>

​</p>

于 2012-05-31T00:39:08.333 回答
0

另一种解决方案可以只是添加 vertical-align: top 例如这个例子：http://jsfiddle.net/Vh6wP/。

这里还有一个关于垂直对齐的链接：http ://css-tricks.com/what-is-vertical-align/其他值。

于 2012-05-31T02:16:17.197 回答