我有一个内联 flex 元素,由两个内联块元素结束。 它们都是不同的高度,但我想将它们与它们的垂直中心对齐。
在webkit中,这可以通过将position: relative; top: 53px;
应用于内联块元素来实现。 但是,在 Firefox 中,这会将内联块放在我想要的位置下方。
删除top
偏移量,我可以看到元素的默认位置在webkit和Firefox中完全不同。
这里有一个小提琴:https://jsfiddle.net/ralphonz/p9s1pjtd/29/
这是我的 HTML:
<div class="newsletter-navigation" role="navigation">
<div class="arrow prev-arrow">
<svg width="100%" height="100%" viewBox="0 0 20 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path id="Arrow-Right-Icon" d="M18.64 32.359L6.323 18.569 18.64 4.78c.923-1.035.923-2.711 0-3.744-.924-1.035-2.421-1.035-3.344 0L1.356 16.642c-.474.531-.701 1.23-.688 1.927-.013.695.214 1.396.688 1.927l13.94 15.606c.923 1.033 2.42 1.033 3.344 0 .923-1.034.923-2.71 0-3.743z" fill="#6d4272"></path></svg>
</div>
<ul class="nav nav-pills">
<li class="archive-year">2017
<ul class="nav">
<li class="nav-item">Item 1</li>
<li class="nav-item">Item 2</li>
<li class="nav-item">Item 3</li>
<li class="nav-item">Item 4</li>
<li class="nav-item">Item 5</li>
</ul>
</li>
<li class="archive-year">2016
<ul class="nav">
<li class="nav-item">Item 1</li>
<li class="nav-item">Item 2</li>
<li class="nav-item">Item 3</li>
<li class="nav-item">Item 4</li>
<li class="nav-item">Item 5</li>
</ul>
</li>
</ul>
<div class="arrow next-arrow">
<svg width="100%" height="100%" viewBox="0 0 20 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path id="Arrow-Right-Icon" d="M18.64 32.359L6.323 18.569 18.64 4.78c.923-1.035.923-2.711 0-3.744-.924-1.035-2.421-1.035-3.344 0L1.356 16.642c-.474.531-.701 1.23-.688 1.927-.013.695.214 1.396.688 1.927l13.94 15.606c.923 1.033 2.42 1.033 3.344 0 .923-1.034.923-2.71 0-3.743z" fill="#6d4272"></path></svg>
</div>
</div>
这是我的 SCSS:
.newsletter-navigation {
width: 100vw;
position: relative;
margin-bottom: 2em;
padding: 0 2em 2em;
background-color: rgb(230,230,230);
.arrow {
display: inline-block;
position: relative;
top: 53px;
width: 19px;
height: 37px;
cursor: pointer;
color: rgb(109,66,114);
}
.prev-arrow {
margin-right: .5em;
}
.next-arrow {
margin-left: .5em;
transform: rotate(180deg);
}
ul.nav {
display: inline-flex;
flex-wrap: nowrap;
width: 100%;
overflow: scroll;
li {
width: 25vw;
margin-right: 1em;
padding: 1em 2em;
background-color: rgb(31,148,195);
border-radius:.5em;
color: #fff;
ul {
padding: 0;
}
}
.nav-item {
text-align: center;
}
.archive-year {
width: auto;
margin: 0;
padding: 0;
background-color: transparent;
color: rgb(128, 128, 128);
}
}
&>ul.nav {
width: 85%;
}
}
如何获得一致的跨浏览器结果并实现垂直居中对齐的目标?
既然你无论如何都在使用 flexbox,不妨用它来垂直对齐你的元素。
#container {
align-items: center;
display: flex;
}
.small {
background: #fcc;
}
.big {
background: #ccf;
font-size: 2em;
}
<div id="container">
<span class="small">flexbox</span>
<span class="big">vertical</span>
<span class="small">alignment</span>
</div>
更新的小提琴