我想在顶部导航栏的垂直下方将文本居中。我试图给。header一个height:3em;并使用vertical-align:middle;,但是我的响应式折叠菜单无法处理固定高度。该菜单不再显示,因为现在高度已固定。我也尝试使用.parent padding:50%0;和.child margin:0 auto;,但是我不明白这一点。我也尝试使用line-height:40px,它看起来还可以-但我的burger-menu-icon不会以这种方式居中。我的burger-menu-icon图标在使用%和翻译时也有问题,我可以通过这种方式居中-但是通过折叠菜单,它也可以移至50%,这是不需要的。更改为固定/绝对将使%崩溃并转换...
html {
font-size: calc(1.3em + 1vw)
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fafafa;
}
/* header */
.header {
position: fixed;
overflow: auto;
width: 100%;
max-width: 30em;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
background: #ffb347; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffb347, #ffcc33); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffb347, #ffcc33); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 15px 20px;
text-decoration: none;
font-size: 0.7em;
color: #000;
background-color: blue;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: blue;
}
.header .logo {
display: block;
float: left;
font-size: 1.3em;
padding: 15px 20px;
text-decoration: none;
color: #000;
background-color: blue;
}
.header .logo:hover {
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
display:table-cell;
vertical-align:middle;
text-align:center;
padding: 0.9em 0.4em;
user-select: none;
background: blue;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 7px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 15px;
}
.header .menu-icon .navicon:after {
top: -15px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 100%;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media (min-width: 920px) {
.header {
position: relative;
}
.header li {
float: left;
}
.header li a {
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<div class="header">
<a href="" class="logo">LOREM <b>IPSUM</b></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work"> <b>Lorem</b></a></li>
<li><a href="#about"><b>Ipsum</b></a></li>
<li><a href="#careers"><b>Dolor</b></a></li>
<li><a href="#contact"><b>Sit</b></a></li>
</ul>
</div>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
以整页开始!
您可以使用csstransform
transform: translateY(10%);
检查代码段。
html {
font-size: calc(1.3em + 1vw)
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fafafa;
}
/* header */
.header {
position: fixed;
overflow: auto;
width: 100%;
max-width: 30em;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
background: #ffb347;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffb347, #ffcc33);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffb347, #ffcc33);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 15px 20px;
text-decoration: none;
font-size: 0.7em;
color: #000;
background-color: blue;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: blue;
}
.header .logo {
display: block;
float: left;
font-size: 1.3em;
padding: 15px 20px;
text-decoration: none;
color: #000;
background-color: blue;
}
.header .logo:hover {}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0.9em 0.4em;
user-select: none;
background: blue;
transform: translateY(10%);
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 7px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 15px;
}
.header .menu-icon .navicon:after {
top: -15px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 100%;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media (min-width: 920px) {
.header {
position: relative;
}
.header li {
float: left;
}
.header li a {}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<div class="header">
<a href="" class="logo">LOREM <b>IPSUM</b></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>
<a href="#work"> <b>Lorem</b></a>
</li>
<li><a href="#about"><b>Ipsum</b></a></li>
<li><a href="#careers"><b>Dolor</b></a></li>
<li><a href="#contact"><b>Sit</b></a></li>
</ul>
</div>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
尝试此CSS
.header {
position: relative;
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}