<label> 的 css 垂直对齐答案

【问题标题】：css vertical align for <label><label> 的 css 垂直对齐
【发布时间】：2015-12-09 02:51:30
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery html css position alignment

【解决方案1】：

试试这个技巧-

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

}

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

【讨论】：

【解决方案2】：

对任何 div 使用高度在 CSS 中是一种不好的做法。尝试改用边距或填充。您可以使用这些 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;
}

【讨论】：