[分享]css与按钮在第一行文字居中

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属性设置，按钮和文字就可以在同一行并且水平垂直居中了。