您的位置：首页 > Web前端 > CSS

CSS 实现一个居中的按钮

2018-01-03 21:44 369 查看
代码源自网易的一个页面 : http://dhxy.163.com/m/2017/xinfu7/ 
<html>
<head>

<style type="text/css">

html {
font-size: 1000%;
}

.tips {
height: 1rem;
border: 1px solid black;
}

.tips a {
background: url(http://img.blog.csdn.net/20180104001341736) 0 0 no-repeat;
background-size: 100% 100%;
width: 1.82rem;
height: .55rem;
margin: .2rem auto 0;
text-align: center;
line-height: .46rem;
font-size: .26rem;
font-weight: 700;
color: #fff9e5;
display: block;
text-decoration: none;
}
</style>
</head>
<body>

<div class="tips">
<a href="javascript:;" bind="#pop-rules1">活动规则</a>
</div>

</body>
</html>

背景图片在博客里保存一下:



1. 使用 display:block 将a标签设置为块级元素。
2. 设置按钮的 height, width 以及 margin. 其中 margin-left 和 margin-right 设置为auto实现了按钮在父元素中水平居中。
3. 使用 background-size: 100% 100% 来填充一个按钮背景。
4. 使用 text-align: center 实现文字的水平居中, 使用 line-height 实现文字的垂直居中。

效果图如下:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航