Html CSS垂直对齐：中间不在导航栏上工作，文本在左侧，登录链接在右侧

我有一个带有标题的页面，下面是一个（菜单/工具）栏，应该包含两个元素：左边的文本（大字体）和登录链接（小文本）。假设右侧连杆垂直居中

以下资源似乎正是我所需要的：

及

这是我的HTML：

<div style="border: 1px solid purple;">
  <h1 style="border: 1px solid red; display: inline;">Textext</h1>
  <span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;"><a href="/admin/login.xhtml">Log In</a></span>
</div>

我基本上做了上面参考资料中的所有事情，但它不起作用-无论是在IE9上还是在FF上。以下是我得到的：

有人知道我做错了什么吗

注意：不需要解决方法/黑客。（一种方法是将padding top设置为：在span上…

试试这个

#logindisplay { line-height: 18pt; }

…并删除垂直对齐属性

---

vertical align

似乎不像你想象的那样工作。请看一看，了解它的作用。

将外部div设置为

显示：表格单元格

，或者为其指定适当大小的

行高

---

垂直对齐是CSS中最愚蠢的部分之一，如果不修改包含的元素，它很少能像您预期的那样工作：

另一种方法是将相对位置放在父div上，然后像这样绝对定位跨度：

#logindisplay {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
}

---

使用float:right会取消您找到的垂直对齐。马克的建议不适用于职位：div上的亲戚？在这种情况下，行高似乎是最简单的方法。

浮点：右否定了垂直对齐。将outer设置为display:table单元格不起作用。这是一个讨厌的东西。问题是强制的

float:right

实际上删除了

align vertical

。因此，唯一有效的方法是

线条高度

或

填充顶部

黑客。我可能会用一张桌子来调整路线。好吧，是的，不是的。首先我不是在寻找解决办法。第二行的高度并不比我提出的填充顶部解决方案好多少。我已经实现了第三个变量作为HTML表。我会让客户决定的。也感谢他的作品。我错过了家长的

位置：relative

部分。

#logindisplay {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
}