我正在尝试将菜单按钮垂直对齐到容器的高度。
容器是我页面的标题,其中菜单按钮应垂直居中放置。
HTML
<div id="container">
<input id="toggle" type="checkbox"><label for="toggle">≡</label>
</div>
CSS
#container {
background-color:#D9303D;
height:9%;
width:100%;
position:absolute;
top:0;
left:0;
}
label {
position: absolute;
top: 0;
right:0;
font-size:38px;
z-index: 300;
cursor: pointer;
transform: translate3d(0, 0, 0);
transition: transform .6s;
}
答案 0 :(得分:1)
在CSS中使用任何div的高度都是不好的做法。尝试使用边距或填充。您可以使用这些CSS代码进行设计。希望它能帮助您设计页面。
#container {
background-color:#D9303D;
padding: 5px;
overflow: auto;
}
label {
float: right;
margin: auto 0;
font-size:38px;
z-index: 300;
cursor: pointer;
transform: translate3d(0, 0, 0);
transition: transform .6s;
}
标头容器和浏览器窗口之间可能存在一些差距。消除你可以在CSS中添加另一行..
body {
margin: 0px;
padding: 0px;
}
答案 1 :(得分:0)
尝试这个技巧 -
#container {display: table-cell;
vertical-align: middle;
border: 2px solid #000;
height:200px;
width:100px;
}
根据需要调整高度,宽度,边框。