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

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

 <!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>

原文由 nenur 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 380

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

第一个选项使用 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) 也用于子元素。

 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>

原文由 user2230470 发布，翻译遵循 CC BY-SA 3.0 许可协议

.Header { z-index: 100; position: fixed; top: 0; left: 0; width: 100%; background-color: #000000; height: 70px; display: flex; justify-content: center; } a { width: 100%; } h1 { margin: 0; color: #fff; } @media (max-width: 960px){ .Header .headerLogo { display: inline-block; width: 86px; height: 15px; margin-left: 6px; } }

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

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译