Coming Soon!

如您所见,中间的按钮略高.为什么会发生这种情况,如何正确对齐？

内联元素的默认垂直对齐方式是"基线",这意味着元素的基线将与其父元素的基线相同.

如果将文本添加到父元素(nav),您将看到每个按钮的第一个单词与它位于同一行:

为了解决这个问题,将vertical-align按钮设置为"顶部"或"底部":

button {
  vertical-align: top;
}

h1
{
	text-decoration: underline;
}
/* Common Header */
body
{
	background-color: #d5d5d5;
}
.header button
{
	background-color:#8C481B;
	text-align:center;
}
button
{
	display:inline-block;
	border-radius:15px;
	height:50px;
	width:125px;
	font-size:20px;
    vertical-align: top;
}
button span .comingsoon
{
	color:#eeeeee;
	font-size:10px!important;
}
nav
{
	text-align:center;
}

	
		
	
	
		
		

			
		
		
		
Coming Soon!