Question

我希望vertical-aligned: middle;元素旁边的链接也是<h1>。但这是不可能的，因为导航器由于某种原因被推倒了。我已经检查过它，没有边距或填充。

<div class="fixed">
  <h1>
  Title
  </h1>

  <nav>
    <ul>
      <li>
        <a href="#">link1</a>
      </li>
      <li>
        <a href="#">link2</a>
      </li>
    </ul>
  </nav>
</div>

.fixed
{
  width: 100%;
  height: 100px;
  background-color:red;
}

h1
{
  height: 100px;
  line-height: 100px;
  display:inline-block;
  margin:0;

  color:white;
}

nav
{
    position:relative;
    height:100%;
    width: auto;
    display:inline-block;
    background-color:green;

    top:0;
    right:0;

    > ul
    {
        height:auto;

        > li
        {
            font-size: 15px;
            padding: 0 12px;
            text-align:center;
            line-height: inherit;
            display:inline-block;


            &:not(:last-child)
            {
                margin-right:0;
            }

            button
            {
              padding: 0;

              &:hover
              {
                background-color: inherit;
                border:none;
              }
            }

            a
            {
                line-height: 50px;
            }
        }
    }
}

Answer 1

给出导航高度：100px;然后无论你想要垂直对齐，给它行高：100px;

https://jsfiddle.net/dak3up0m/14/

否则我只会改变你的整个结构并使用flexbox，更清洁，更容易检查出来：

.fixed {
  display: flex;
  align-items: center;
  height: 100px;
  background-color: tomato;

  h1 {
    margin: 0;
  }
}

nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    margin-left: 10px;
  }
}

https://jsfiddle.net/dak3up0m/23/

Answer 2

我认为一个非常优雅的解决方案就是使用flexbox。通常，当您尝试将多个元素垂直居中时，这是最简单且性能最佳的方式。此外，代码更清晰。

请参阅此fiddle

{{1}}

导航被推入固定div内

2 个答案: