手写选项卡切换水平垂直居中

最新推荐文章于 2022-07-27 17:10:26 发布

ly521xp

最新推荐文章于 2022-07-27 17:10:26 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/ly521xp/article/details/92704181

版权

本文介绍了三种实现手写选项卡切换时水平垂直居中的方法：使用display: flex结合justify-content和align-content属性；通过设置position: absolute并调整top, left, bottom, right的值；以及定位到绝对位置的50%，再用负margin进行微调。" 72794030,5774294,"Android解析JSON到List<Map<String, Object>>

摘要由CSDN通过智能技术生成

手写tab切换

	<style>
		* {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		
		.warp {
			width: 360px;
			height: 400px;
			border: 1px solid #b6b6b6;
			margin: 50px auto;
		}
		
		#btn {
			width: 360px;
			height: 40px;
		}
		
		#btn li {
			float: left;
			width: 118px;
			margin: 0 1px;
			background: #ddd;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		
		#btn .active {
			background: #b6b6b6;
		}
		
		#show {
			width: 360px;
			height: 460px;
		}
		
		#show li {
			width: 360px;
			height: 460px;
			display: none;
		}
	</style>
</head>
<body>
	<div>
		<div class="warp" id='warp'>
			<ul id="btn">
				<li class="active">选项1</li>
				<li>选项2</li>
				<li>选项3</li>
			</ul>

			<ul id="show">
				<li style="background:green;display:block"><img src="" alt=""></li>
				<li style="background:red;"><img src="" alt=""></li>
				<li style="background:blue;"><img src="" alt=""></li>
			</ul>
		</div>
	</div>
	<script>
		"use strict"
		window.onload = function() {
			new tablechoise('warp')
		}

		function tablechoise(bnt) {

			this.choise = function(btn) {
				for(var i = 0; i < this.aShow.length; i++) {
					this.aShow[i].style.display = 'none';
					this.aBtn[i].className = '';
					// console.log(this.aBtn[i])
				}

				//console.log(btn.aBtn)
				this.aBtn[btn.index].className = 'active'
				this.aShow[btn.index].style.display = 'block'
			}

			var _this = this;
			var oWarp = document.getElementById(bnt)
			this.aBtn = oWarp.children[0].children;
			this.aShow = oWarp.children[1].children;
			for(var i = 0; i < this.aBtn.length; i++) {
				this.aBtn[i].index = i
				this.aBtn[i].onclick = function() {
					_this.choise(this)
				}
			}

		}
	</script>
</body>

水平垂直居中

第一种方法
display: flex;justify-content: center;align-content: center;
如果父元素为body，要加上html，body{height：100%}
第二种方法
position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: 0 auto;
第三种方法
position: absolute;top: 50%;left: 50%;