导航标题html css中的居中元素答案

【问题标题】：Centering elements in navigation header html css导航标题html css中的居中元素
【发布时间】：2017-08-27 13:16:22
【问题描述】：

我已经制作了一个导航标题（你怎么称呼它），我希望在它的中间添加一些文本。

它基本上是一个黑色条，右侧有一些导航按钮（例如主页、关于我们、信息、图库...），左侧有一个徽标，现在我想在该条中间添加一些文本。我无法让它工作。

这是我到目前为止的代码。

/* Global settings */

* {
  font-family: Roboto;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}


/* Header settings */

.header {
  height: 50px;
  width: 100%;
  background-color: #212121;
  position: fixed;
  text-align: center;
}

.header ul {
  height: 100%;
  float: right;
  position: relative;
  right: 50px;
}

.header li {
  display: inline-block;
  height: 100%;
  width: 75px;
  text-align: center;
}

.header li:hover {
  background-color: #616161;
}

.header a {
  display: block;
  color: #FAFAFA;
  height: 100%;
  line-height: 50px;
  border: 1px solid orange;
}

.header img {
  height: 100%;
  color: #FAFAFA;
  float: left;
}

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

<body>
  <div class="header">
    <h1>The text I want to be centered</h1>
    <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>
    <img src="" alt="Logo" />
  </div>
</body>

【问题讨论】：

标签： html css element center centering

【解决方案1】：

你可以试试这个：
HTML

<body>
  <div class="header">
     <img src="" alt="Logo" />
     <h1>The text I want to be centered</h1>
     <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>
</body>

CSS

* {
  font-family: Roboto;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

/* Header settings */
.header {
  width: 100%;
  background-color: #212121;
  position: fixed;
  text-align: center;
  display:flex;
  justify-content:space-between;
  padding:0 10px;
  box-sizing: border-box;
}

.header ul {
  height: 100%;
  position: relative;
}

.header li {
  display: inline-block;
  height: 100%;
  width: 75px;
  text-align: center;
}

.header li:hover {
  background-color: #616161;
}

.header a {
  display: block;
  color: #FAFAFA;
  height: 100%;
  line-height: 50px;
  border: 1px solid orange;
}

.header img {
  height: 100%;
  color: #FAFAFA;
}

.header h1 {
  color: #FAFAFA;
  line-height: 50px;
  display: inline-block;
}

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

【讨论】：

【解决方案2】：

这是使用Flexible Box 的解决方案。 Flexbox 在旧版本的 IE 中确实存在兼容性问题，但对于非恐龙浏览器，它确实运行良好。这是一个good link 以了解更多信息。

您可能需要调整h1 的大小以避免文本换行，并修复li 上的一些边框。

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

* {
  font-family: Roboto;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

div.header {
  display: flex;
  background-color: #212121;
}

.flex-item {
  margin: auto;
  height: 50px;
  flex: 1 1 0;
}


/* Used to make 3 sections in the head*/

h1.flex-item {
  text-align: center;
  line-height: 50px;
  color: #FAFAFA;
}

ul.flex-item {
  display: flex;
}

img.flex-item {
  color: #FAFAFA;
}


/* Used to make NAV*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li.flex-item-li {
  width: 75px;
  text-align: center;
  line-height: 50px;
}

li.flex-item-li a {
  display: block;
  color: #FAFAFA;
  line-height: 50px;
  border: 1px solid orange;
}

li.flex-item-li:hover {
  background-color: #616161;
}

<body>
  <div class="header">
    <img class="flex-item" src="" alt="Logo" />
    <h1 class="flex-item">Text I want to be centered</h1>
    <ul class="flex-item">
      <li class="flex-item-li"><a href="">Home</a></li>
      <li class="flex-item-li"><a href="">Info</a></li>
      <li class="flex-item-li"><a href="">Contact</a></li>
      <li class="flex-item-li"><a href="">About</a></li>
    </ul>

  </div>
</body>

【讨论】：

我玩了一下，查看了一些关于 flexbox 的教程，但它似乎仍然不起作用。可能是我的问题解释得不够清楚。我希望文本在整个黑框中居中。与菜单和徽标的距离不相等。如果我可以从 flexbox 中排除菜单和徽标，您的解决方案将起作用。
@WernerSchoemaker 哦。本质上，您希望文本位于 Nav 元素的后面？给我一秒钟...
为了澄清事情，我创建了一个我正在寻找的小草图。 drive.google.com/file/d/0BzqvOBblncladkV6a1dxNkszWlU/…
@WernerSchoemaker 我做了一个我认为符合您要求的编辑。

【解决方案3】：

它已经在中心，但由于右侧的菜单和左侧的徽标，它正被推离原来的中心位置。

所以要解决这个问题，只需通过添加边距将文本拉向中心。像这样：

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

在整页中查看此代码 sn-p 以获取结果：

* {
  font-family: Roboto;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}


/* Header settings */

.header {
  height: 50px;
  width: 100%;
  background-color: #212121;
  position: fixed;
  text-align: center;
}

.header ul {
  height: 100%;
  float: right;
  position: relative;
  right: 50px;
}

.header li {
  display: inline-block;
  height: 100%;
  width: 75px;
  text-align: center;
}

.header li:hover {
  background-color: #616161;
}

.header a {
  display: block;
  color: #FAFAFA;
  height: 100%;
  line-height: 50px;
  border: 1px solid orange;
}

.header img {
  height: 100%;
  color: #FAFAFA;
  float: left;
}

.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>
    <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>
    <img src="" alt="Logo" />
  </div>
</body>

【讨论】：

【解决方案4】：

我几乎可以通过在 flex div 中仅放置导航和徽标来实现它。现在我只需要将 flexdiv 放在文本之上。如果有人能解释一下真的很快就好了，但最重要的部分已经完成了。

http://codepen.io/werner1107/pen/EWMPVM

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>

CSS：

    /* Global settings */
    * {
      font-family: Roboto;
      padding: 0;
      margin: 0;
    /*   border: 1px solid orange; */
    }

    a {
      text-decoration: none;
    }

    /* Header settings */
    .header {
      height: 50px;
      width: 100%;
      background-color: #212121;
    }

    .header h1 {
      color: #FAFAFA;
      line-height: 50px;
      left: 0;
      right: 0;
      text-align: center;
    }

    .test {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .test img {
      height: 100%;
      width: auto;
      color: #FAFAFA;
    }

    .test ul {
      height: 100%;
    }

    .test li {
      display: inline-block;
      list-style-type: none;
      height: 100%;
      text-align: center;
    }

    .test a {
      display: inline-block;
      height: 100%;
      color: #FAFAFA;
      width: 75px;
      line-height: 50px;
    }

    .test li:hover {
      background-color: #616161;
    }

【讨论】：