浏览器之间的内联元素高度不一致
问题描述:
我有一个inline-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>
您需要在这里发表您的标记,而不是一个的jsfiddle可以去死在明天,有助于对未来没有一个:[MCVE] – Rob
@Rob将使我确信我将来会这样做。抱歉。 – Ralphonz