Question

我只有一个简单的html：

<body>
    <header id="cabecalho">
        <nav id="menu">
            <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Contact</li>
            </ul>
        </nav>
    </header>
</body>

CSS：

<style>
          *{
              padding: 0;
              margin: 0;    
          }
          html{
              width: 100%;
              height: 100%;
          }
          body{
              width: 100%;
              height: 100%;
          }
          header#cabecalho{
            width: 100%;
            height: 5%;
            background-color: rgb(60, 92, 86); 
            overflow: hidden;
          }
          nav#menu{
            display: block;
            height: 50%;
            width: 100%;
            overflow: hidden;
            margin-top: auto;
            margin-bottom: auto;
          }
          nav#menu ul{
            height: 100%;
            width: 100%;
            list-style: none;
          }
          nav#menu ul li{
              display:inline-block;
              color: white;  
          }


      </style>

我只想垂直集中标题中的菜单，但它始终位于顶部。 obs：使用margin：x Pixels有效，但我不认为这是解决这个问题的最佳方法。

Answer 1

有多种方法可以解决这个问题。

我会定位导航和标题，然后给它position: relative;。然后我会给菜单top: 50%;和transform: translate(-50%);

这会将菜单向下移动50％，然后将其拉回到自身高度的50％。导致居中的菜单。

如果您想将文本置于菜单中心，我建议您对ul进行相同的操作。

您可以查看此参考资料JS fiddle，但请注意，我已在菜单中添加了背景，并将标题放大以方便查看。

NavBar保证金：自动，不起作用

1 个答案: