Question

我有一个菜单结构：

http://imageshack.us/scaled/thumb/248/image4.gif

某些菜单有子菜单，在这种情况下我需要那个小红色箭头。但正如你所看到的，它是最长项目的新线;它没有居中。这就是我试过的：

<a href="/fax">&nbsp;
  <span>flick&nbsp;</span><span style="float: right; vertical-align: middle;"><img src="/design/right.gif" width="4" height="7" /></span>
</a>

（实际代码中没有换行符和空格，只是为了更容易阅读）

在这种情况下，箭头会向右移动，但不会在中间但在顶部 - 如果是最后一个菜单项，它会向下移动：S

Answer 1

给出一个line-heigth: 20px;（例如..根据您的speccs以不同的高度进行游戏）。只有这样才能使垂直对齐工作。

此外：具有 和高度和宽度属性的内容是什么。你正在使用CSS，到处使用它。

用style="left: 1em;"替换a上的a。用style="padding-right: 1em;"替换跨度。将高度/宽度属性替换为等效的css。

Answer 2

我会添加位置：相对于标签和位置：绝对是图像。

Answer 3

为此，您必须将float：left添加到第一个span，如下所示。

<a href="/fax">&nbsp;<span style="float:left;">flick&nbsp;</span><span style="float: right; vertical-align: middle;"><img src="D:/wamp/www/xplifeline/application/images/default.jpg" width="4" height="7" /></span></a>

Answer 4

我有这个：

<ul id="nav">
<li>Menu 1
    <ul class="nav first">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4
        <ul class="nav">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </li>
    </ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>

从这里开始：http://jsfiddle.net/y9jbQ/

现在看起来：

<span style="float: left; line-heigth: 40px; vertical-align: middle; display: inline-block;">&nbsp;menu&nbsp;</span><span style="float: right; line-heigth: 40px; vertical-align: middle;"><img src="/design/right.gif" width="4" height="7" /></span>

现在的结果是：http://s12.postimage.org/muw3hehyh/Image4.gif?noCache=1353932739

如何将图片对齐，中间？

4 个答案: