我目前正在开发一点登录,我对CSS有点问题。我有两个输入:Click me!
除了“用户名”和“电子邮件”文本应垂直居中外,一切都很好。为此,我使用“vertical-align:middle;”属性。这工作正常,但如果我添加“浮动:正确;”到文本框然后浏览器似乎忽略这个垂直对齐,我认为这是因为我的输入浮动属性导致边距崩溃。所以我读到我应该在下一个项目中应用“clear”属性。我这样做但是它没有用,可能是因为我的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>
我希望有人能够解决我的问题。
答案 0 :(得分:0)
查看这篇文章: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>