Question

我正在尝试将菜单按钮垂直对齐到容器的高度。

容器是我页面的标题，其中菜单按钮应垂直居中放置。

HTML

<div id="container">
<input id="toggle" type="checkbox"><label for="toggle">&equiv;</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;
}

Answer 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;
}

Answer 2

尝试这个技巧 -

#container {display: table-cell;
vertical-align: middle;
border: 2px solid #000;
height:200px; 
width:100px;

}

根据需要调整高度，宽度，边框。

css垂直对齐<label>

2 个答案: