Question

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

Answer 1

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

Answer 2

我偏爱绝对定位。

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>

Answer 3

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

以下是CSS:content的问题：

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

Answer 4

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

此处还有一个关于vertical-align的链接：http://css-tricks.com/what-is-vertical-align/用于其他值。

如何将文本垂直对齐到图像的中间？

4 个答案: