Question

感谢您帮助我。

我试图在我的标题中垂直和水平对齐我的文字。它只是停留在标题的最底部。

我似乎无法从标题的底部移动文本。我身上有0填充物。

非常感谢任何帮助。

HTML

<body>
<div class="background">
<div class="header">
<div class="menu">   
     <ul class="nav"> 
        <li id="nav-products"><a href="#">Products</a></li>
        <li id="nav-contact"><a href="#">Contact</a></li>
        <li id="nav-about"><a href="#">About</a></li>
    </ul>
    <div class="logo">
        <img src="images/Logo sketch.png">
    </div> 
 </div>
</body>

CSS

    .nav {
        box-sizing: border-box;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        position: relative;

    }

    .header {
        background-color: white;
        padding-top: 100px;
        background-size: cover;
        background-position: center;
        position: relative;


    }

    ul { /*text header*/
        list-style: none;
        position: absolute;
        text-align: center;
        border: 2px dashed #f69c55;

    }

    ul li {
        outline: 0 none;
        display: inline-block;
        padding: 0 2.6em;
        margin: 0;

    }

    a {
        color: #111;
        font-size: 16px;
        font-style: normal;
        font-weight: 100;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: black;
    }
    a:hover {
        text-decoration: none;
        color: black;
    }
    a:active {
        text-decoration: none;
        color: black;
    }

Answer 1

所以我正在编辑我的答案以解决你的问题：

在您的情况下，如果您需要垂直居中和水平的绝对定位元素，你应该使用顶部/底部和左/右偏移。

水平居中＆amp;垂直：

html

横向居中：

ul{
  position: absolute;
  /* Add top & left offset */
  top: 50%;
  left: 50%;
  /* Transform your element to perfectly center it */
  transform: translate(-50%, -50%);
}

垂直居中：

ul{
  position: absolute;
  /* Add left offset */
  left: 50%;
  /* Transform your element to perfectly center it */
  transform: translateX(-50%);
}

水平对齐标题中的文本

1 个答案: