CSS 实现一个居中的按钮

最新推荐文章于 2022-03-22 11:06:12 发布

yuliying

最新推荐文章于 2022-03-22 11:06:12 发布

阅读量1.7w

点赞数 1

分类专栏： web/html5

本文链接：https://blog.csdn.net/yuliying/article/details/78965864

版权

web/html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

    代码源自网易的一个页面 : 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 实现文字的垂直居中。 
  
    效果图如下: