我有一个网站的HTML代码,但中心的元素太过分了.这是我的代码:
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;
}
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!
京公网安备 11010802040832号 | 京ICP备19059560号-6 