css生成button的方法以及对text-align的理解

最新推荐文章于 2022-04-22 14:08:00 发布

yingzizizizizizzz

最新推荐文章于 2022-04-22 14:08:00 发布

阅读量909

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yingzizizizizizzz/article/details/81105360

版权

css 专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>button</title>
	<style type="text/css">
	html{font-size: 100px;}
	.btn{
		color: #FF567F;
		font-size: 0.28rem;
		width: 1.5rem;
		height: 0.6rem;
		line-height: 0.6rem;
		text-align: center;
		border: 0.02rem solid #FF567F;
		border-radius: 1rem;
		margin-right: 0.76rem;
	}
	.zi{
		font-size: 0.16rem;
	}
	.cl{
		background: #FF567F;
	}
</style>
</head>
<body>
	<div class="btn">按钮</div>

	<div class="zi">按钮其实就是字下边有个颜色的背景，然后加上js的click即可。</div>
	<div class="zi">对于样式的实现，相当于background有宽和高，有颜色（或者有border）；接着，文字水平垂直居中即可。不过，不是说text-align适用于行内元素吗？为什么对于div也可以让文字居中呢？</div>
	<div class="zi cl">解答：text-align，允许值 left| center | right | justify ，初始值 与用户代理有关，可否继承 是。适用范围是块级元素内的行内元素，单独对img使用text-align是没有效果的。至于div中的文字可以生效，我认为是div是块级元素，而div中的文字是行内元素，所以能够生效居中。

适用于 块级元素</div>
</body>
</html>