导航标题html css中的居中元素我制作了一个导航头（I.D.K.你怎么称呼它），我想要一些文本在中间。 <body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body> 基本上是一个黑条，右边有一些导航按钮（例如，家里，关于我们，信息，画廊……）左边的一个标志，现在我想在那个条的中间有一些文字。我不能让它工作 <body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>_Html_Css_Element_Center_Centering

导航标题html css中的居中元素我制作了一个导航头（I.D.K.你怎么称呼它），我想要一些文本在中间。 <body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body> 基本上是一个黑条，右边有一些导航按钮（例如，家里，关于我们，信息，画廊……）左边的一个标志，现在我想在那个条的中间有一些文字。我不能让它工作 <body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>

html css

导航标题html css中的居中元素我制作了一个导航头（I.D.K.你怎么称呼它），我想要一些文本在中间。 <body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body> 基本上是一个黑条，右边有一些导航按钮（例如，家里，关于我们，信息，画廊……）左边的一个标志，现在我想在那个条的中间有一些文字。我不能让它工作 <body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>,html,css,element,center,centering,Html,Css,Element,Center,Centering,这是我目前掌握的代码 <body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href=

这是我目前掌握的代码

    <body>
      <div class="header">
        <h1>The text I want to be centered</h1>
        <div class="test">
          <img src="" alt="Logo" />
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Info</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
          </ul>
        </div>
      </div>
    </body>

/*全局设置*/
* {
字体系列：Roboto；
填充：0；
保证金：0；
}
a{
文字装饰：无；
}
/*标题设置*/
.标题{
高度：50px；
宽度：100%；
背景色：#212121；
位置：固定；
文本对齐：居中；
}
.标题ul{
身高：100%；
浮动：对；
位置：相对位置；
右：50px；
}
李局长{
显示：内联块；
身高：100%；
宽度：75px；
文本对齐：居中；
}
.头李：悬停{
背景色：#6161；
}
.标题a{
显示：块；
颜色：#FAFAFA；
身高：100%；
线高：50px；
边框：1px实心橙色；
}
.标题img{
身高：100%；
颜色：#FAFAFA；
浮动：左；
}
.标题h1{
颜色：#FAFAFA；
线高：50px；
显示：内联块；
}


我想要居中的文本

您可以试试这个：
HTML

    <body>
      <div class="header">
        <h1>The text I want to be centered</h1>
        <div class="test">
          <img src="" alt="Logo" />
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Info</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
          </ul>
        </div>
      </div>
    </body>

上面所做的是将文本放置在与徽标和菜单等距离的位置。因此，文本不会精确居中，但可能看起来更“正确”。

下面是一个使用的解决方案。Flexbox在旧版本的IE中确实存在兼容性问题，但对于非恐龙浏览器来说，它确实工作得很好。下面是一个学习更多信息的方法

    <body>
      <div class="header">
        <h1>The text I want to be centered</h1>
        <div class="test">
          <img src="" alt="Logo" />
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Info</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
          </ul>
        </div>
      </div>
    </body>

您可能需要调整

h1

的大小以避免文本换行，并修复

li

上的一些边框

    <body>
      <div class="header">
        <h1>The text I want to be centered</h1>
        <div class="test">
          <img src="" alt="Logo" />
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Info</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
          </ul>
        </div>
      </div>
    </body>

编辑：我将
flex:1 10
添加到
.flex项
，这将使所有元素大小相同，从而使文本居中。我也从各个元素中删除了
flex
规则。这将在大屏幕上看起来最好

<body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>

*{ 字体系列：Roboto；填充：0；保证金：0； } a{ 文字装饰：无； } 分区标题{ 显示器：flex；背景色：#212121； } .弹性项目{ 保证金：自动；高度：50px；弹性：110； } /*用于在头部制作3个部分*/ h1.flex-item{ 文本对齐：居中；线高：50px；颜色：#FAFAFA； } ul.flex-item{ 显示器：flex； } img.flex-item{ 颜色：#FAFAFA； } /*用来做导航的*/ 保险商实验室{ 列表样式类型：无；保证金：0；填充：0； } li.flex-item-li{ 宽度：75px；文本对齐：居中；线高：50px； } li.flex-item-li a{ 显示：块；颜色：#FAFAFA；线高：50px；边框：1px实心橙色； } li.flex项li：悬停{ 背景色：#6161； }

文本我想居中
它已经位于中心位置，但由于右侧的菜单和左侧的徽标，它正被推离原来的中心位置

<body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>
因此，要解决这个问题，只需通过添加边距将文本拉向中心即可。像这样：

.header h1 { color: #FAFAFA; Line-height: 50px; display: inline-block; margin-right: -200px; }

<body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>
请完整查看此代码段以获取结果：

<body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>

*{ 字体系列：Roboto；填充：0；保证金：0； } a{ 文字装饰：无； } /*标题设置*/ .标题{ 高度：50px；宽度：100%；背景色：#212121；位置：固定；文本对齐：居中； } .标题ul{ 身高：100%；浮动：对；位置：相对位置；右：50px； } 李局长{ 显示：内联块；身高：100%；宽度：75px；文本对齐：居中； } .头李：悬停{ 背景色：#6161； } .标题a{ 显示：块；颜色：#FAFAFA；身高：100%；线高：50px；边框：1px实心橙色； } .标题img{ 身高：100%；颜色：#FAFAFA；浮动：左； } .标题h1{ 颜色：#FAFAFA；线高：50px；显示：内联块；右边距：-200px； }

我想要居中的文本
我在flex div中只放置了导航和徽标，几乎就成功了。现在我只需要将flexdiv放在文本顶部即可。如果有人能解释一下，真的很快就好了，但最重要的部分已经完成了

<body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>

<body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>
html:

<body> <div class="header"> <h1>The text I want to be centered</h1> <div class="test"> <img src="" alt="Logo" /> <ul> <li><a href="">Home</a></li> <li><a href="">Info</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </div> </div> </body>

我玩了一会儿，看了一些关于FlexBox的教程，但它似乎仍然不起作用。可能是我没有把我的问题解释清楚。我希望文本在整个黑框中居中。与菜单和徽标的距离不相等。如果我可以从flexbox中排除菜单和徽标，您的解决方案就会起作用。@WernerSchoemaker噢。基本上，您希望文本位于导航元素后面？给我一点时间…为了澄清一些事情，我画了一张我要找的东西的草图@WernerSchoemaker我做了一个编辑，我想这是你想要的。