为什么按钮没有对齐？
Old*_*800 2 html css html5 css3
我有一个网站的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>如您所见,中间的按钮略高.为什么会发生这种情况,如何正确对齐？
Ric*_*ock 14
内联元素的默认垂直对齐方式是"基线",这意味着元素的基线将与其父元素的基线相同.
如果将文本添加到父元素(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>你的 CSS 中有一个额外的空间——“comingsoon”类没有应用于你的跨度；
改变从
button span .comingsoon
到
button span.comingsoon
将修复按钮对齐和字体大小错误。