CSS与按钮在第一行文字居中.btn { display: inline-block; text-align: center; line-height: 28px; background-color:
CSS与按钮在第一行文字居中
.btn { display: inline-block; text-align: center; line-height: 28px; background-color: #8bc34a; color: #fff; padding: 0 20px; border-radius: 3px; } p { text-align: center; margin-top: 20px; }
在网页设计中,为了提高用户体验,有时需要在页面上添加一些按钮来引导用户执行特定的操作。但是,当按钮和文字放在同一行时,如果按钮不居中,整个页面会显得不协调。
CSS中提供了一些属性可以让按钮和文字在同一行并居中,其中最重要的就是display、text-align和line-height。
首先,将按钮的display属性设置为inline-block,这样按钮和文字就可以在同一行并占据自己的空间。
.btn { display: inline-block; }
然后,将按钮和文字的text-align属性都设置为center,这样它们就可以水平居中了。
.btn { display: inline-block; text-align: center; } p { text-align: center; }
最后,将按钮的line-height属性设置为与按钮高度相同的值,这样按钮和文字就可以垂直居中了。
.btn { display: inline-block; text-align: center; line-height: 28px; }
通过以上这些CSS属性设置,按钮和文字就可以在同一行并且水平垂直居中了。
粉丝
0
关注
0
收藏
0