响应中心徽标li项目

时间：2016-01-13 04:20:37

标签： html css

我正在尝试使.home始终以浏览器窗口大小的任何更改为中心。目前.home略微偏离中心位置，并根据浏览器窗口的大小向左/向右移动。怎么做到这一点？任何帮助将不胜感激： - ）

false
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 1em;
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
html,
body {
    height: 100%;
}
a {
    background: transparent;
    border: none;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: .3s color;
    transition: .3s height;
}
header {
    position: fixed;
    height: 60px;
    width: 100%;
}
.header-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
}
.header-bg,
.header-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.header-bg {
    color: gray;
    background: white;
    border-bottom: 1px solid black;
    transition: .3s height;
    height: 0;
}
.header-content {
    margin-left: auto;
    margin-right: auto;
    transition: .3s color;
    color: white;
    background: transparent;
    height: 60px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
    width: 100%;
}
li {
    padding-top: 15px;
    display: inline-block;
    *display: inline;
    /*IE7*/
    
    *zoom: 1;
    /*IE7*/
    
    margin-right: 50px;
}
.navBarLinks {
    margin-left: auto;
    margin-right: auto;
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
    padding-top: 15px;
    line-height: 31px;
}
.instagram {
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding-left: 2%;
}

.home {
    padding-left: 5%;
}
.insticon {
    margin-left: auto;
    margin-right: auto;
    float: right;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
    fill: white;
    font-size: .8em;
    letter-spacing: 0.05em;
    padding: .05px 10px;
}
@media only screen and (max-width: 555px) {
    .find {
        display: none;
    }
}

.hamburger {
    margin-left: auto;
    margin-right: auto;
    float: right;
    padding-right: 3%;
}
 #toggle-menu {
    float:right;
    display: block;
    width: 15px;
    height: 15px;
	}
	
.header-wrapper #toggle-menu span {
    width: 15px;
    height: 3px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s 	ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
	background: #fff;
	}
	}
	#toggle-menu span.top {
    top: 0px;
	}
	#toggle-menu span.middle {
    top: 6px;
	}
	#toggle-menu span.bottom {
    top: 12px;
	}
</style> <!--STAGE-0 STYLE-->
<style> 
content {
    height: 2000px;
    background: orange;
}
.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background: white;
    border-bottom: 1px solid black;
    font-size: 48px;
    height: 200px;
    width: 100%;
}
.stage-0 {
    background: grey;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.video {
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
/*promo video scroll*/

.arrow-bounce {
    padding: 5%;
    color: white;
    padding-left: 50%;
    font-size: 26px;
    cursor: pointer;
    position: absolute;
    -webkit-transition: -webkit-transform 0.6s ease;
    -moz-transition: -moz-transform 0.6s ease;
    transition: transform 0.6s ease;
    -webkit-animation: arrow 1s infinite;
    -moz-animation: arrow 1s infinite;
    -o-animation: arrow 1s infinite;
    animation: arrow 1s infinite;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
@-webkit-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@-moz-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
/*----/----promo video scroll*/

1 个答案:

答案 0 :(得分：1)

只需将text-align:center;添加到UL即可让所有人始终居中。并从padding-left: 5%;

中删除.home

＆＃13;
＆＃13; 
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 1em;
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
html,
body {
    height: 100%;
}
a {
    background: transparent;
    border: none;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: .3s color;
    transition: .3s height;
}
header {
    position: fixed;
    height: 60px;
    width: 100%;
}
.header-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
}
.header-bg,
.header-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.header-bg {
    color: gray;
    background: white;
    border-bottom: 1px solid black;
    transition: .3s height;
    height: 0;
}
.header-content {
    margin-left: auto;
    margin-right: auto;
    transition: .3s color;
    color: white;
    background: transparent;
    height: 60px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
    width: 100%;
    text-align:center;
}
li {
    padding-top: 15px;
    display: inline-block;
    *display: inline;
    /*IE7*/
    
    *zoom: 1;
    /*IE7*/
    
    margin-right: 50px;
}
.navBarLinks {
    margin-left: auto;
    margin-right: auto;
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
    padding-top: 15px;
    line-height: 31px;
}
.instagram {
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding-left: 2%;
}

.home {
    
}
.insticon {
    margin-left: auto;
    margin-right: auto;
    float: right;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
    fill: white;
    font-size: .8em;
    letter-spacing: 0.05em;
    padding: .05px 10px;
}
@media only screen and (max-width: 555px) {
    .find {
        display: none;
    }
}

.hamburger {
    margin-left: auto;
    margin-right: auto;
    float: right;
    padding-right: 3%;
}
 #toggle-menu {
    float:right;
    display: block;
    width: 15px;
    height: 15px;
	}
	
.header-wrapper #toggle-menu span {
    width: 15px;
    height: 3px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s 	ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
	background: #fff;
	}
	}
	#toggle-menu span.top {
    top: 0px;
	}
	#toggle-menu span.middle {
    top: 6px;
	}
	#toggle-menu span.bottom {
    top: 12px;
	}
</style> <!--STAGE-0 STYLE-->
<style> 
content {
    height: 2000px;
    background: orange;
}
.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background: white;
    border-bottom: 1px solid black;
    font-size: 48px;
    height: 200px;
    width: 100%;
}
.stage-0 {
    background: grey;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.video {
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
/*promo video scroll*/

.arrow-bounce {
    padding: 5%;
    color: white;
    padding-left: 50%;
    font-size: 26px;
    cursor: pointer;
    position: absolute;
    -webkit-transition: -webkit-transform 0.6s ease;
    -moz-transition: -moz-transform 0.6s ease;
    transition: transform 0.6s ease;
    -webkit-animation: arrow 1s infinite;
    -moz-animation: arrow 1s infinite;
    -o-animation: arrow 1s infinite;
    animation: arrow 1s infinite;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
@-webkit-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@-moz-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
/*----/----promo video scroll*/
＆＃13; 
<script src=	"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
    <div class="header-wrapper">
        <div class="header-bg"></div>
        <div class="header-content">
            <ul>
                <li class="instagram">
                    <a href="" class="navBarLinks find">Find me on</a>
                    <a href="" class="navBarLinks in">
                        <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
                            <style type="text/css">
                                .st0 {}
                            </style>
                            <path class="st0" d="M50.1,121.7H28.8V53h21.4V121.7z M39.4,43.6c-6.8,0-12.4-5.6-12.4-12.4s5.5-12.4,12.4-12.4
	c6.8,0,12.4,5.5,12.4,12.4C51.8,38,46.3,43.6,39.4,43.6z M130.1,121.7h-21.3V88.3c0-8-0.1-18.2-11.1-18.2
	c-11.1,0-12.8,8.7-12.8,17.6v34H63.5V53H84v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7
	C130.1,84,130.1,121.7,130.1,121.7z" />
                        </svg>
                    </a>
                </li>
                <li class="home"><a href="" class="navBarLinks">Logo </a>
                </li>
                <li class="hamburger">
                <a href="" id="toggle-menu" class="navBarLinks">
    <span id="top" class="burger"></span>
    <span id="middle" class="burger"></span>
    <span id="bottom" class="burger"></span>
    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
<content>
    <div class="stage stage-0">

<div id="arrow">
            <span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns=	"http://www.w3.org/2000/svg">
	<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
	<path d="M0-.75h24v24H0z" fill="none"/>
	</svg>
    </span>
        </div>



        <video controls class="video">
            <source src="chrome.webm" type="video/webm">
                <source src="chrome.mp4" type="video/mp4">
                    <p>This browser does not support the video element.</p>
        </video>
    </div>
    <div class="stage stage-2">3</div>
    <div class="stage stage-4">5</div>
    <div class="stage stage-6">7</div>
    <div class="stage stage-8">9</div>
    <div class="stage stage-10">11</div>
    <div class="stage stage-12">13</div>
    <div class="stage stage-14">15</div>
    <div class="stage stage-16">17</div>
    <div class="stage stage-18">19</div>
    <div class="stage stage-20">21</div>
    <div class="stage stage-22">23</div>
</content>
＆＃13;
＆＃13;
＆＃13;

修改

使中间LI始终位于屏幕的中心。有一个解决方案可以制作中间段position:absolute并提供left:50%。

.home {
    left: 50%;
    position: absolute;
    transform: translate(-50%);
}

并将UL提供给position:relative。

＆＃13;
＆＃13; 
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 1em;
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
html,
body {
    height: 100%;
}
a {
    background: transparent;
    border: none;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: .3s color;
    transition: .3s height;
}
header {
    position: fixed;
    height: 60px;
    width: 100%;
}
.header-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
}
.header-bg,
.header-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.header-bg {
    color: gray;
    background: white;
    border-bottom: 1px solid black;
    transition: .3s height;
    height: 0;
}
.header-content {
    margin-left: auto;
    margin-right: auto;
    transition: .3s color;
    color: white;
    background: transparent;
    height: 60px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
    width: 100%;
    text-align:center;
}
li {
    padding-top: 15px;
    display: inline-block;
    *display: inline;
    /*IE7*/
    
    *zoom: 1;
    /*IE7*/
    
    margin-right: 50px;
}
.navBarLinks {
    margin-left: auto;
    margin-right: auto;
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
    padding-top: 15px;
    line-height: 31px;
}
.instagram {
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding-left: 2%;
}

.home {
    left: 50%;
    position: absolute;
    transform: translate(-50%);
}
.insticon {
    margin-left: auto;
    margin-right: auto;
    float: right;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
    fill: white;
    font-size: .8em;
    letter-spacing: 0.05em;
    padding: .05px 10px;
}
@media only screen and (max-width: 555px) {
    .find {
        display: none;
    }
}

.hamburger {
    margin-left: auto;
    margin-right: auto;
    float: right;
    padding-right: 3%;
}
 #toggle-menu {
    float:right;
    display: block;
    width: 15px;
    height: 15px;
	}
	
.header-wrapper #toggle-menu span {
    width: 15px;
    height: 3px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s 	ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
	background: #fff;
	}
	}
	#toggle-menu span.top {
    top: 0px;
	}
	#toggle-menu span.middle {
    top: 6px;
	}
	#toggle-menu span.bottom {
    top: 12px;
	}
</style> <!--STAGE-0 STYLE-->
<style> 
content {
    height: 2000px;
    background: orange;
}
.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background: white;
    border-bottom: 1px solid black;
    font-size: 48px;
    height: 200px;
    width: 100%;
}
.stage-0 {
    background: grey;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.video {
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
/*promo video scroll*/

.arrow-bounce {
    padding: 5%;
    color: white;
    padding-left: 50%;
    font-size: 26px;
    cursor: pointer;
    position: absolute;
    -webkit-transition: -webkit-transform 0.6s ease;
    -moz-transition: -moz-transform 0.6s ease;
    transition: transform 0.6s ease;
    -webkit-animation: arrow 1s infinite;
    -moz-animation: arrow 1s infinite;
    -o-animation: arrow 1s infinite;
    animation: arrow 1s infinite;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
@-webkit-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@-moz-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
＆＃13; 
<script src=	"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
    <div class="header-wrapper">
        <div class="header-bg"></div>
        <div class="header-content">
            <ul>
                <li class="instagram">
                    <a href="" class="navBarLinks find">Find me on</a>
                    <a href="" class="navBarLinks in">
                        <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
                            <style type="text/css">
                                .st0 {}
                            </style>
                            <path class="st0" d="M50.1,121.7H28.8V53h21.4V121.7z M39.4,43.6c-6.8,0-12.4-5.6-12.4-12.4s5.5-12.4,12.4-12.4
	c6.8,0,12.4,5.5,12.4,12.4C51.8,38,46.3,43.6,39.4,43.6z M130.1,121.7h-21.3V88.3c0-8-0.1-18.2-11.1-18.2
	c-11.1,0-12.8,8.7-12.8,17.6v34H63.5V53H84v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7
	C130.1,84,130.1,121.7,130.1,121.7z" />
                        </svg>
                    </a>
                </li>
                <li class="home"><a href="" class="navBarLinks">Logo </a>
                </li>
                <li class="hamburger">
                <a href="" id="toggle-menu" class="navBarLinks">
    <span id="top" class="burger"></span>
    <span id="middle" class="burger"></span>
    <span id="bottom" class="burger"></span>
    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
<content>
    <div class="stage stage-0">

<div id="arrow">
            <span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns=	"http://www.w3.org/2000/svg">
	<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
	<path d="M0-.75h24v24H0z" fill="none"/>
	</svg>
    </span>
        </div>



        <video controls class="video">
            <source src="chrome.webm" type="video/webm">
                <source src="chrome.mp4" type="video/mp4">
                    <p>This browser does not support the video element.</p>
        </video>
    </div>
    <div class="stage stage-2">3</div>
    <div class="stage stage-4">5</div>
    <div class="stage stage-6">7</div>
    <div class="stage stage-8">9</div>
    <div class="stage stage-10">11</div>
    <div class="stage stage-12">13</div>
    <div class="stage stage-14">15</div>
    <div class="stage stage-16">17</div>
    <div class="stage stage-18">19</div>
    <div class="stage stage-20">21</div>
    <div class="stage stage-22">23</div>
</content>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题