Flexbox 垂直对齐 - 项目不完全居中答案

【问题标题】：Flexbox vertical alignment - items not completly centralFlexbox 垂直对齐 - 项目不完全居中
【发布时间】：2017-07-18 14:39:20
【问题描述】：

我正在尝试创建标题，一侧是带有导航的徽标，另一侧是用户选项。但我遇到了问题 - 对面的项目没有完全居中。我尝试删除填充，但结果保持不变。

有什么解决办法吗？

header
  nav
    img(src="assets/img/logo.png").logo
    div.divider
    ul
      li: a(href="") Link
      li: a(href="") Link
      li: a(href="") Link
      li: a(href="") Link
  div.options
    div.leagues-dropdown Option
    div.date-picker Option
    div.search Option
    div.account Option

还有 SASS

header
    height: 67px
    padding: 0 25px
    display: flex
    justify-content: space-between
    border-bottom: 1px solid #D2D2D2
    align-items: center

    .logo
        width: 67px
        height: 15px
        padding-right: 25px

    .divider
        height: 67px
        border-left: 1px solid #D2D2D2
        padding-right: 25px

    nav
        display: flex
        align-items: center

        a
            opacity: 0.55
            font-family: OpenSans-Bold
            font-size: 12px
            color: #000000
            text-transform: uppercase
            text-decoration: none

        ul
            display: flex
            li
                padding: 0 10px

    .options
        display: flex
        align-items: center

        div
            padding: 0 10px
            opacity: 0.55
            font-family: OpenSans-Bold
            font-size: 12px
            color: #000000
            text-transform: uppercase

http://codepen.io/anon/pen/zZGeLO

【问题讨论】：

“对面的项目没有完全居中”是什么意思？你希望它看起来如何？
我希望双方在同一条线上i.imgur.com/pbxTTDz.png
在您的 aelements 上使用 display:block
谢谢，这成功了！也许你知道使用它是否会破坏任何浮动或者没关系，因为我使用的是 flexbox？

标签： html css flexbox pug vertical-alignment

【解决方案1】：

您做得对，但我会将带有选项 nav 的链接导航放在同一个父级下，然后我会在父级上使用 display: flex 和 align-items:center。这样您就可以 100% 确定它们在同一行。

【讨论】：

感谢您的建议。我认为这行不通，因为我使用的是分隔符，它与标题的大小相同。但我会努力的。