为什么按钮没有对齐？

Question

我有网站的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> 

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

Answer 1

内联元素的默认垂直对齐方式是“基线”，这意味着元素的基线将与其父元素的基线相同。

如果您将文本添加到父元素（ 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> 

Answer 2

你的CSS中有一个额外的空间 - “comesoon”类没有应用到你的范围;

改变了

button span .comingsoon

至

button span.comingsoon

将修复按钮对齐和字体大小错误。

Answer 3

你需要重置vertical-align值：

 a, button { vertical-align: top; /* or any other value that suits you */ } 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> 

Answer 4

您必须删除span和.comingsoon之间的.comingsoon

使用： button span.comingsoon

Answer 5

它们是错误对齐的，因为文本是多行的。

尝试设置较小的字体大小，或设置white-space：nowrap样式以实现仅一行文本。

或者，您可以根据文本中的文本删除宽度并让按钮有机地生长。