Javascript 垂直中心div响应
我正试图以响应的方式垂直居中导航面板,使其在所有~940px及以上的屏幕上居中。我找到了这篇文章,但我无法用我当前的代码有效地实现这一点 htmlJavascript 垂直中心div响应,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正试图以响应的方式垂直居中导航面板,使其在所有~940px及以上的屏幕上居中。我找到了这篇文章,但我无法用我当前的代码有效地实现这一点 html <body> <!-- Header --> <div class="header"> <a href="#"><i id="nav-button" class="fa fa-2x fa-navicon"></i></a>
<body>
<!-- Header -->
<div class="header">
<a href="#"><i id="nav-button" class="fa fa-2x fa-navicon"></i></a>
<header class="logo">
<a href="index.html"><img src="../Assets/images/logo.png" alt=""></a>
</header>
<a href="#"><i id="account-control" class="fa fa-2x fa-user"></i></a>
</div>
<!-- Content Wrapper-->
<div class="wrapper">
<!-- Content -->
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="nav-sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li class="active"><a href="#"><i class="fa fa-dashboard" alt="Dashboard"></i></a></li>
<li><a href="#"><i class="fa fa-dollar" alt="Billing"></i></a></li>
<li><a href="#"><i class="fa fa-support" alt="Support"></i></a></li>
<li><a href="#"><i class="fa fa-cubes" alt="Servers"></i></a></li>
<li><a href="#"><i class="fa fa-cogs" alt="Settings"></i></a></li>
<li><a href="#"><i class="fa fa-bar-chart-o" alt="Reports"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
js
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-padding-start: 0px;
}
.wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 75px;
z-index: 0;
}
#content {
position: relative;
left: 0;
z-index: 0;
height: 100%;
overflow: auto;
}
/* Header */
.header {
background-color: white;
width: 100%;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Navigation Sidebar */
#nav-sidebar {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
width: 80px;
background: none;
opacity: 1;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
#nav-sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
}
#nav-sidebar:before {
content: '';
height: 100%;
vertical-align: middle;
}
.nav-sidebar-open #nav-sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
.nav-sidebar-open #nav-sidebar:after {
width: 0;
height: 0;
opacity: 0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
vertical-align: middle;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: inline-block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
}
.mainmenu ul li a:hover, .mainmenu ul li a:active {
background: #3498db;
color: white;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.mainmenu ul li a:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mainmenu ul li a:last-child {
border-bottom: none;
}
.mainmenu ul li a i {
margin: 20px;
}
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button').click(function() {
$('#nav-button').toggleClass('nav-button-open');
$('body').toggleClass('nav-sidebar-open');
return false;
});
});(jQuery);
注意(不要害怕190行CSS,大约90行是可以忽略的CSS转换。)
还有,这是供你玩的游戏。非常感谢您提前提供的帮助。我猜,如果查看端口为940px或更宽,您希望与查看端口高度垂直对齐的是滑出的面板。我不确定其他的事情,所以我设法做到了这一点,但我必须清理一下。请随意使用您需要的零件,并丢弃其他零件。定位从来都不是一个好主意:修复包装,不知道为什么要这样做。也不知道你为什么要在身体上显示:块 演示: 相同的html,相同的jQuery 您可能还需要添加最小高度,这是一个演示: 最相关的是以下内容,但许多其他事项也需要调整:
/* --- added --- */
@media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}
CSS
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
margin: 0; /* -- added -- */
padding: 0; /* -- added -- */
}
body {
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
}
/* -- wrapper not needed .wrapper {} -- */
#content {
position: relative;
z-index: 0;
padding:95px 20px 20px 20px;
transition: padding .5s ease-in-out;
}
.nav-sidebar-open #content {padding-left:100px;}
/* Header */
.header {
background-color: white;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
width: 100%;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
}
/* Navigation Sidebar */
#nav-sidebar {
position: fixed;
top:75px;
left: -88px;
width: 80px;
background: none;
z-index: 1;
transition: all .5s ease-in-out;
}
.nav-sidebar-open #nav-sidebar {
left:0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
background:#fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* --- added --- */
@media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}
与其将所有代码都放在这里,不如只发布与您的问题相关的部分?是的,我确实希望滑出面板与视口垂直对齐,您就在这里。:)感谢您指出我的代码中的其他错误,我对所有这些都比较陌生,所以很高兴看到我的错误、最佳实践等。您是如何得出
页边顶部:-213px代码>?你的符号不太清楚。总导航项目的高度除以2,然后减去头部高度的一半,这是视觉高度,我使用了FF web dev tools随附的工具,否则如果你使用6 x 8,因为那里有填充。除非你支持传统浏览器,AFIK您只需要转换,而不需要其他前缀。看见