Question

所以我遇到的问题是LOGO这个词没有响应vertical-align：中间和无序列表元素工作正常，如何解决这个问题？提前致谢

我的HTML代码：

<body>
    <header>
        <nav>
            <div class="innerContainer">
                <div class="leftSide">Logo</div>
                <div class="rightSide">
                    <ul>
                        <li>Label</li>
                        <li>Label</li>
                        <li>Label</li>
                        <li class="btn">SIGN IN</li>
                    </ul>
                </div>
            </div>    
        </nav>
    </header>
</body>

我的css代码：

.innerContainer{
    vertical-align: middle;
    padding: 2%;
    width: 80%;
    margin: auto;
    overflow: auto;
}

header .rightSide{
   float: right;
}

header .leftSide{
 float:left;
}

Answer 1

将display: flex与justify-content: space-between一起使用，使元素显示在左/右，然后使用align-items: center;将它们垂直居中。

＆＃13;

.innerContainer {
  padding: 2%;
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

＆＃13;

<header>
  <nav>
    <div class="innerContainer">
      <div class="leftSide">Logo</div>
      <div class="rightSide">
        <ul>
          <li>Label</li>
          <li>Label</li>
          <li>Label</li>
          <li class="btn">SIGN IN</li>
        </ul>
      </div>
    </div>
  </nav>
</header>

＆＃13;

CSS3垂直对齐问题

1 个答案: