Question

我不确定我做错了什么，但是我试图将导航元素垂直居中并将其固定在屏幕的右侧，但是有一些东西将它推向中心位置。

红色是弹性容器，绿色是标题，灰色框是右对齐和垂直居中的框我希望垂直居中，而不是“偏离中心”。

我无法弄清楚是什么让它跳了下来。

我创建了一个JSFIDDLE，这样你就可以看到我想要实现的目标。（基本上它是一个固定的弹性容器，位于滚动页面上。

<div class="navWrap"><!-- Place less important HTML after main content (My brain hurts!)-->

            <header>

                <nav>
                </nav>

            </header>

            <nav class="pagesNav next">

                <span class="arrow"></span>
                <span class="arrow"></span>

            </nav>

        </div>

CSS：

.navWrap {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; 

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 

    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh; 

    background: red;
}

header {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: 100%;
    height: 70px;
    background: green;
}

nav:not(.pagesNav) {
}

.pagesNav { 
    margin-left: auto;

    width: 80px;
    height: 155px;

    background: #414141;
}

Answer 1

您的标题位于错误的位置，请尝试此

<div class="pageWrap"><!-- Primary content first for SEO purposes. Use CSS to rearrange secondary elements -->


          <header>

                <nav>
                </nav>

        </header>
     <main role="main">

                <section></section>
                <section></section>
                <section></section>
                <section></section>

            </main>

            <footer>
            </footer>

        </div>

        <div class="navWrap"><!-- Place less important HTML after main content (My brain hurts!)-->


            <nav class="pagesNav next">

                <span class="arrow"></span>
                <span class="arrow"></span>

            </nav>

        </div>

css

    html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

html, body {
  height: 100%;
}

body {

}

/* Temp styles */

.pageWrap {

}

main {
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
}

section {
    height: 100vh;
    width: 100%;
    background: white;
}

section:first-child {
    height: 95vh;
}

section:nth-child(even) {
    background: yellow;
}

footer {
    height: 300px;
    background: red;
}

/* Less important info */
header{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; 

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 

    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;   

}
.navWrap {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; 

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 

    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh; 
}

header {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: 100%;
    height: 70px;
    background: green;
}

nav:not(.pagesNav) {
}

.pagesNav { 
    margin-left: auto;

    width: 80px;
    height: 155px;

    background: #414141;
}

这里是小提琴https://jsfiddle.net/L4u9t78m/2/

Flexbox和CSS3宽度/高度声明的垂直居中问题

1 个答案: