未知高度和宽度元素的水平垂直居中 当要被居中的元素是inline或者inline-block元素

2018-01-03 11:12:00
admin
原创
426
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>未知高度和宽度元素的水平垂直居中 当要被居中的元素是inline或者inline-block元素</title>
	</head>
	<style>
#container{
	width:600px;
	height:300px;
	background:#d6d6d6;
	display:table-cell;
	text-align:center;
  vertical-align:middle;
}

#center{
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
}
	</style>
	<body>
	<div id='container'>
		<span id='center'>#center</span>
	</div>
		
	</body>
</html>
  • QQ讨论群
  • 关注微信
    • 欢迎咨询
    • 欢迎加入QQ群 16506021
  • 公众号:源宝网络