我有一个网站的 HTML 代码，但是 <button>中心的元素太远了。这是我的代码:
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;
}
button span .comingsoon
{
color:#eeeeee;
font-size:10px!important;
}
nav
{
text-align:center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<a href="index.html"><button type="button">Home</button></a>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<a href="help.html"><button type="button">Help</button></a>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>如您所见，中间的按钮略高。为什么会发生这种情况，我该如何正确对齐它们？
最佳答案
内联元素的默认垂直对齐方式是“基线”，这意味着元素的基线将与其父元素的基线相同。
如果您向父元素 (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;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<a href="index.html"><button type="button">Home</button></a>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<a href="help.html"><button type="button">Help</button></a>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>关于html - 为什么按钮没有对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34256549/