垂直对齐：中间不与父元素对齐？

Question

根据w3schools，vertical-align：middle属性应该将它应用的元素与其父元素对齐。

不幸的是，这对我不起作用。我一直在做一些测试，而vertical-align实际上与父母中最高的元素对齐......这基本上迫使我创建一个无用的元素（div），只是在每次我想要的时候继承父级的高度垂直对齐单个元素。

图片可以帮助您更好地理解我的意思：

＆＃13;

＆＃13;

#search-login {
	border: 1px solid black;
	/*text-align: center;*/
	overflow: hidden;
	height: 75px;
}


#search-bar {
	/*
	vertical-align: middle;
	display: inline-block;
	*/
	float: left;
	/*border: 1px solid black;*/
	/*padding: 5px;*/
	height: inherit;
	background-color: blue;
	
}

#search-bar-valign-fix {
	height: inherit;
	display: inline-block;
	vertical-align: middle;
}

#search-bar form {
	display: inline-block;
	vertical-align: middle;
}

#search-bar form input[type="text"] {
	width: 500px;
	padding-left: 3px;
	padding-right: 3px;
}

#search-bar form select {
	width: 150px;
}



#login-bar {
	/*
	vertical-align: middle;
	display: inline-block;
	*/
	float: right;
	/*
	border: 1px solid black;
	padding: 5px;
	*/
	height: inherit;
	background-color: green;
}

#login-bar-valign-fix {
	height: inherit;
	display: inline-block;
	vertical-align: middle;
	
}

#login-bar form {
	display: inline-block;
	vertical-align: middle;
}

#login-bar form input[type="text"], #login-bar form input[type="password"] {
	width: 150px;
	padding-left: 3px;
	padding-right: 3px;
}

#create-account {
	text-align: right;
}

＆＃13;

<div id="login-bar">
<div id="login-bar-valign-fix"></div>
<form method="post">
    <p id="create-account"><a href="sign_up">Create account</a></p>
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="pwd" placeholder="Password">
    <input type="submit" value="login">
</form>
</div>

<div id="search-bar">
<div id="search-bar-valign-fix"></div>
<form method="get">
    <input type="text" name="search" placeholder="Search books">
    By
    <select name="search-by">
        <option value="title">Title</option>
        <option value="authors-name">Author's name</option>
        <option value="genre">Genre</option>
        <option value="language">Language</option>
    </select>
    <input type="submit" value="Search">
</form>
</div>

＆＃13;

＆＃13;

＆＃13;

登录和搜索栏周围有一个名为search-login btw的div。

现在，如果我删除valign-fix div，会发生这种情况......

有更好的方法吗？我是css的新手，我发现做一个简单的布局非常复杂。

感谢您的帮助。

Answer 1

它实际上使项目居中，但您在同一容器中有一个“创建帐户...”链接。这就是为什么它看起来有点低于中心..

要么删除create an account，要么将margin-top: -16px（或任何行高/字体大小）添加到登录容器