CSS 手机导航没有垂直居中,但是前面的元素都不错
CSS mobile navigation not centered vertically, but the previous elements are good
我有一个带有 link 的简单导航和我用 css 做的移动导航图标。由于未知原因,'icon' 没有垂直居中,它接近中心,但缺少更多像素。
几个小时后,我发现该项目是 inline-block
,但文本 link 是 inline
。我想这就是原因,但为什么我的浏览器对齐 inline-block
'icon'?!看起来浏览器试图将它居中,但并不完美。我不明白为什么会这样,你能解释一下吗?
CSS
.nav-buttons {
list-style: none;
margin: 0;
padding: 0;
line-height: 100px;
background: pink;
position: relative;
}
.nav-buttons li {
display: inline-block;
}
a {
position: relative;
display: inline-block;
padding: 0 15px;
}
.l-bars {
position: relative;
width: 0.9em;
height: 1em;
display: inline-block;
}
.l-bars .lines {
position: absolute;
top: 50%;
left: 0;
width: 0.9em;
height: 0.12em;
margin-top: -0.06em;
background-color: red;
}
.l-bars .lines:after, .l-bars .lines:before {
position: absolute;
left: 0;
height: inherit;
width: 100%;
background-color: red;
content: ' ';
}
.l-bars .lines:before {
top: -6px;
}
.l-bars .lines:after {
top: 6px;
}
HTML
<ul class="nav-buttons">
<li><a href=""><i>y</i></a></li>
<li><a href=""><i>x</i></a></li>
<li class="bars"><a href=""><i class="l-bars"><span class="lines"></span></i></a></li>
</ul>
我做了一个 JSFiddle link:http://jsfiddle.net/6bo0jLL6/
对于每个具有 display: inline-block 的样式;添加此样式... vertical-align: middle;
垂直对齐可用于与表格和内联元素相关的元素。
问题已解决:http://jsfiddle.net/6bo0jLL6/76/
CSS:
.inline-block {vertical-align: middle;}
请查看 jsfiddle
我有一个带有 link 的简单导航和我用 css 做的移动导航图标。由于未知原因,'icon' 没有垂直居中,它接近中心,但缺少更多像素。
几个小时后,我发现该项目是 inline-block
,但文本 link 是 inline
。我想这就是原因,但为什么我的浏览器对齐 inline-block
'icon'?!看起来浏览器试图将它居中,但并不完美。我不明白为什么会这样,你能解释一下吗?
CSS
.nav-buttons {
list-style: none;
margin: 0;
padding: 0;
line-height: 100px;
background: pink;
position: relative;
}
.nav-buttons li {
display: inline-block;
}
a {
position: relative;
display: inline-block;
padding: 0 15px;
}
.l-bars {
position: relative;
width: 0.9em;
height: 1em;
display: inline-block;
}
.l-bars .lines {
position: absolute;
top: 50%;
left: 0;
width: 0.9em;
height: 0.12em;
margin-top: -0.06em;
background-color: red;
}
.l-bars .lines:after, .l-bars .lines:before {
position: absolute;
left: 0;
height: inherit;
width: 100%;
background-color: red;
content: ' ';
}
.l-bars .lines:before {
top: -6px;
}
.l-bars .lines:after {
top: 6px;
}
HTML
<ul class="nav-buttons">
<li><a href=""><i>y</i></a></li>
<li><a href=""><i>x</i></a></li>
<li class="bars"><a href=""><i class="l-bars"><span class="lines"></span></i></a></li>
</ul>
我做了一个 JSFiddle link:http://jsfiddle.net/6bo0jLL6/
对于每个具有 display: inline-block 的样式;添加此样式... vertical-align: middle;
垂直对齐可用于与表格和内联元素相关的元素。
问题已解决:http://jsfiddle.net/6bo0jLL6/76/
CSS:
.inline-block {vertical-align: middle;}
请查看 jsfiddle