0
点赞
收藏
分享

微信扫一扫

第十五届蓝桥杯省赛C/C++大学B组真题及赛后总结

老北京的热干面 2024-04-16 阅读 9

目录

效果图

 代码及其解释

补充解释


效果图

同时实现盒子与文字的居中

 代码及其解释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 500px;
				height: 500px;
				background-color: #B8860B;
				margin: 0 auto;
				/* 当left、right两个方向都设为auto时,自动水平居中,比如这里就是,上下为0,左右为auto */
				border: 1px solid #B8860B;
				/* 一定要将大盒子中设置边框,不然的话系统会将大小盒子看成一个整体,当你要把小盒子在大盒子内向下移动时,会整体移动 */
				
				margin-top: 150px;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: greenyellow;
				margin: 0 auto;
				text-align: center;
				line-height: 100px;
				/* 文字高度=盒子高度时文字才能完全居中 */
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				哈哈哈
			</div>
		</div>
	</body>
</html>

补充解释

今天的分享就到此结束啦~~希望能帮到您! 

举报

相关推荐

0 条评论