Html CSS-浮动和垂直中间
我目前正在开发一个小的登录,我对CSS有一个小问题。我有两个输入: 除了“用户名”和“电子邮件”文本应垂直居中外,一切正常。为此,我使用了“垂直对齐:中间”属性。这很好,但是如果我在文本框中添加一个“float:right;”,那么浏览器似乎忽略了这个垂直对齐,我认为这是因为输入的float属性导致边距塌陷。所以我读到我应该对下一项应用“clear”属性。我这样做了,但可能是因为我的HTML结构,它不起作用。以下是我的CSS和HTML的代码: CSS:Html CSS-浮动和垂直中间,html,css,css-float,vertical-alignment,Html,Css,Css Float,Vertical Alignment,我目前正在开发一个小的登录,我对CSS有一个小问题。我有两个输入: 除了“用户名”和“电子邮件”文本应垂直居中外,一切正常。为此,我使用了“垂直对齐:中间”属性。这很好,但是如果我在文本框中添加一个“float:right;”,那么浏览器似乎忽略了这个垂直对齐,我认为这是因为输入的float属性导致边距塌陷。所以我读到我应该对下一项应用“clear”属性。我这样做了,但可能是因为我的HTML结构,它不起作用。以下是我的CSS和HTML的代码: CSS: .append { width:
.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%;
}
<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<span><i class="fa fa-user"></i> Username</span>
</div>
HTML:
.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%;
}
<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<span><i class="fa fa-user"></i> Username</span>
</div>
用户名
我希望有人能想出一个好主意来解决我的问题。看看这篇文章: 具体来说,这一部分:
.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”环绕标签:
用户名
浮动元素不能垂直对齐。请使用stackoverflow搜索,因为这个问题以前被问过很多次。太棒了,很高兴我能帮上忙