个人中心
gpt4 book ai didi

html - 如何在 html 的导航菜单中间居中标题文本

转载 作者：行者123 更新时间：2023-12-02 08:15:38 25 4
gpt4 key购买 nike

我想知道如何将我在创建的导航菜单中心编写的标题文本居中，文本已经居中，但它位于导航菜单的顶部，而不是中间，这正是我所需要的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

    }
    @media (max-width: 960px){
    .Header .headerLogo{
        display: inline-block;
        width: 86px;
        height: 15px;
        margin-top: 17px;
        margin-left: 6px;
    }
    }
</style>
</head>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
    <header><center><i><font size = "6" face = "verdana" color = "white">Lunation Boards</font></i></center></header>
    </a>
</div>
</body>
</html>

最佳答案

您有三个选项，其中前两个选项更可靠。

第一个选项使用 flex-box 将元素水平和垂直居中。

div {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
}

text {
  background: orange;
}
<div>
   <text>Centered horizontally and vertically</text>
</div>


第二个选项不是使用 flex-box，而是使用父元素的相对位置、子元素的绝对位置和 transform: translate(X, Y)也是为了 child 。 

div {
  width: 100%;
  height: 200px;
  position: relative;
  background: blue;
}

text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: orange;
}
<div>
   <text>Centered horizontally and vertically</text>
</div>


第三个选项，为了使元素垂直居中，使用 line-height等于 height父元素的。 

div {
  width: 100%;
  height: 200px;
  position: relative;
  background: blue;
}

text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 200px;
  background: orange;
}
<div>
   <text>Centered horizontally and vertically</text>
</div>

关于html - 如何在 html 的导航菜单中间居中标题文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42306417/

25 4 0
文章推荐： html - CSS中的自定义样式进度条
文章推荐： java - 拉取表单名称作为参数
文章推荐： Java:将 TreeModel、TableModel 序列化为 JSON，反之亦然？
文章推荐： c - 为嵌套循环声明虚拟变量的更好方法是什么？