CSS - 浮动和垂直中间

Question

我目前正在开发一个小登录，但我的 CSS 有点问题。我有两个输入：Click me!

一切都很好，除了“用户名”和“电子邮件”文本应该垂直居中。为此，我使用“垂直对齐：中间；”财产。这很好，但如果我添加一个“float：right;”到文本框，然后浏览器似乎忽略了这个垂直对齐，我认为这是因为我的输入上的 float 属性导致边距折叠。所以我读到我应该对下一个项目应用“清除”属性。我这样做了，但它没有工作可能是因为我的 HTML 结构。这是我的 CSS 和 HTML 的代码：

CSS：

.append {
    width: 80%;
    display: inline-block;
    vertical-align: middle;
    background-color: #1E2229;
    border-radius: 4px;
    padding-left: 6px;
    font-size: 12px;
    border: 1px #17191F solid;
}

.append input {
    display: inline-block;
    float: right;
    height: 13px;
    outline: 0;
    background-color: #1E2229;
    color: white;
    padding: 10px;
    border-left: 1px #17191F solid;
    border-right: none;
    border-bottom: none;
    border-top: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 75%;
}

HTML：

<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<span><i class="fa fa-user"></i> Username</span>
</div>

我希望有人有一个好主意可以解决我的问题。

Answer 1

看看这篇文章：http://css-tricks.com/centering-in-the-unknown/ 特别是这里的这部分：

.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

让某些东西垂直对齐到中间的好方法是将显示更改为表格单元格，但是如果您想浮动它，这将不起作用。如果你想浮动它，我建议将你想要浮动的所有东西都包裹在另一个 div 中，并在上面浮动。

编辑

我做了一点小改动，把这个添加到你的 css 中：

.append .vert-middle{
    display: table-cell;
    vertical-align: middle;
    height: 33px;
}

并用 div ".vert-middle" 包围您的标签：

<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<div class='vert-middle'><span><i class="fa fa-user"></i> Username</span></div>
</div>