文本垂直对齐CSS

Question

我构建了一个标题，我在下面有HTML代码

#header{
	height:50px;
	border-bottom: 1px solid #000;
}
.left{
	display: inline-block;
	float: left;
}
.right{
	display: inline-block;
	float: right;
}
.logo{
	display: inline-block;
	font-size: 40px;
}
.slogan{
	display: inline-block;
	vertical-align: middle;
}

.menu{
	margin: 0px;
}
.menu li {
	display: inline;
}

<div id="header">
	<div class="left">
		<div class="logo">LOGO</div>
		<div class="slogan">SLOGAN HERE</div>
	</div>
	<div class="right">
		<nav>
			<ul class="menu">
				<li><a href="" title="">Menu 1</a></li>
				<li><a href="" title="">Menu 2</a></li>
				<li><a href="" title="">Menu 3</a></li>
				<li><a href="" title="">Menu 4</a></li>
			</ul>
		</nav>
	</div>
</div>

我想要标语和菜单是标题div的中间所以我使用CSS vertical-align: middle;但它不起作用。它只适用于vertical-align: top;

如何解决？

非常感谢你。

Answer 1

您可以使用line-height来达到您想要的效果。标题高度为50px，因此您应该为列表项提供50px的行高。我认为在这种情况下这将解决您的问题，但如果您的文本有多行，则无法解决问题。

Answer 2

将元素display: inline-block上的display: table更改为.left，然后.slogan将display: table-cell;更改为display: inline-block;。

＆＃13;

＆＃13;

#header{
	height:50px;
	border-bottom: 1px solid #000;
}
.left{
    /*display: inline-block;*/
	display: table;
    float: left;
}
.right{
	display: inline-block;
	float: right;
}
.logo{
	display: inline-block;
	font-size: 40px;
}
.slogan{
	vertical-align: middle;
    display: table-cell;
    /*display: inline-block;*/
}

.menu{
	margin: 0px;
}
.menu li {
	display: inline;
}

＆＃13;

<div id="header">
	<div class="left">
		<div class="logo">LOGO</div>
		<div class="slogan">SLOGAN HERE</div>
	</div>
	<div class="right">
		<nav>
			<ul class="menu">
				<li><a href="" title="">Menu 1</a></li>
				<li><a href="" title="">Menu 2</a></li>
				<li><a href="" title="">Menu 3</a></li>
				<li><a href="" title="">Menu 4</a></li>
			</ul>
		</nav>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;