个人中心
gpt4 book ai didi

javascript - 响应地垂直居中div

转载 作者：太空宇宙 更新时间：2023-11-04 13:06:18 25 4
gpt4 key购买 nike

我正在尝试响应式地将导航面板垂直居中，以便它在 ~940px 及以上的所有屏幕上居中。我找到了这篇文章 CSS-Tricks但我无法用我当前的代码有效地实现这一点。

html

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

CSS

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

js

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 过渡。)

此外，这里是 jsFiddle供您玩耍。非常感谢您提前提供帮助。

最佳答案

我猜测如果视口(viewport)为 940 像素或更宽，您希望滑出的面板与视口(viewport)的高度垂直对齐。我不确定其他事情，所以我设法实现了这一点，但我不得不稍微清理一下。随意使用您需要的部分并丢弃其他部分。 position:fix 包装器从来都不是一个好主意，不确定你为什么这样做。也不知道为什么你有一个 display:block 在 body 上。

演示:http://jsbin.com/zaguzo/1

相同的 html，相同的 jQuery

您可能还想添加一个最小高度，这是一个演示:http://jsbin.com/wegow/1

最相关的是以下内容，但还需要调整许多其他内容:

/* --- 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 */
    }
}

关于javascript - 响应地垂直居中div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25110447/

25 4 0
文章推荐： html - css - 最大高度 : 100% doesn't work on textarea
文章推荐： c++ - shared_ptr 在 if 条件下如何工作
文章推荐： javascript - Highcharts - 仪表图表数据标签定位不正确
文章推荐： c++ - 引用基类的 constexpr 构造函数因编译器而异
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com