文本垂直居中对齐CSS

debugcn 发表于 Dev

金吾

我建立了一个标头，下面有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;

如何解决？

非常感谢。

吉尔达斯·坦博

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

#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;
}

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。