自适应&居中

最新推荐文章于 2025-01-22 20:00:18 发布

weixin_38296925

最新推荐文章于 2025-01-22 20:00:18 发布

阅读量181

点赞数

分类专栏： html 文章标签：左侧导航栏自适应高度居中

本文链接：https://blog.youkuaiyun.com/weixin_38296925/article/details/88124786

版权

html 专栏收录该内容

2 篇文章

订阅专栏

一、左侧导航栏自适应液面高度

要想按钮高度自适应，按钮所有的上级菜单都要加上height:100%

<!doctype html>
<html lang="en" style="height: 100%;">
	<head>
		<!-- Required meta tags -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Hello World</title>
	</head>
	<body style="height: 100%;">
		<div class="main_left">
			<div class="nav btn-group-vertical" style="height: 100%;">
				<button type="button" class="btn btn-secondary navbtn">Name</button>
				<button type="button" class="btn btn-secondary navbtn">Education</button>
			</div>
		</div>
	</body>
</html>

其中引用了bootstrap4的css和js
以及

.main_left{
    width: 15%;
    height: 100%;
    float:left;
    cursor:pointer;
}

二、水平垂直居中

.main_center{
	height:50%;
	width:50%;
	text-align:center;
	margin: auto;
	position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}