弹性盒子的行高设置文字垂直居中

弹性盒子的行高设置文字垂直居中


行高设置居中对齐,是针对内容宽度
在CSS3的border-sizing模式下,是内减模式
所以要减去padding和border
要小心

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	div {
		/*width: 300px;*/
		/*height: 300px;*/
		width: 200px;
		height: 200px;
		background-color: pink;
		margin: 100px auto;
	}
	/*弹性盒子,文字显示在减去border和padding后的区域内,不是width
	content盒子,就是用width即可*/
	a {
		display: block;
		width: 200px;
		height: 200px;
		border: 70px solid red;
		line-height: 60px;
	}
	</style>
</head>
<body>
	<div>
		<a href="#">name</a>
	</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/ckxkobe/article/details/84610340
今日推荐