Question

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

任何想法如何解决？

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

Answer 1

你做得对，但是我会把链接nav与选项nav放在同一个父级下面，然后我会在父级上使用display: flex和align-items:center。通过这种方式，您可以100％确定它们位于同一条线上。

Flexbox垂直对齐 - 项目不完全中心

1 个答案: