CSS中的按钮是网站设计中常用的元素之一,但是按钮上的字如何居中却是一个常见的问题。下面介绍一些常用的方法。button{ text-align: center;/* 按钮内部文字居中显示 */ di
CSS中的按钮是网站设计中常用的元素之一,但是按钮上的字如何居中却是一个常见的问题。下面介绍一些常用的方法。
button{ text-align: center;/* 按钮内部文字居中显示 */ display: inline-block;/* 将按钮设为行内块元素,容器宽度由内容撑开 */ vertical-align: middle;/* 将按钮垂直居中对齐 */ line-height: normal;/* 设置文本行高为正常值,解决行高影响居中问题 */ }
在这个方法中,我们首先将按钮中的文本水平居中。其次,将按钮设为行内块元素,使得它的宽度可以根据内容进行自适应。同时,使用vertical-align: middle;让按钮在容器中垂直居中对齐。最后使用line-height: normal;解决行高的影响。
button{ position: relative;/* 设置相对布局 */ top: 50%;/* 将按钮上移一半的高度 */ transform: translateY(-50%);/* 将按钮移下来一半的高度,完成垂直居中 */ display: inline-block;/* 将按钮设为行内块元素 */ text-align: center;/* 按钮内部文字居中显示 */ }
这个方法是使用CSS3的transform属性,通过将按钮上移一半的高度,并使用transform: translateY(-50%);将按钮移下来一半的高度来完成垂直居中。同样地,我们也将按钮设为行内块元素,并让内部文本水平居中。
粉丝
0
关注
0
收藏
0