CSS 实现一个居中的按钮

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yuliying/article/details/78965864
代码源自网易的一个页面 : 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(https://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 实现文字的垂直居中。

效果图如下: 




阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页