导航标题中的元素html css

时间：2017-04-02 18:00:35

标签： html css element center centering

我制作了一个导航标题（i.d.k.你怎么称呼它），我想要一些文字在它的中间。

它基本上是一个黑色的条形图，右边有一些导航按钮（例如Home，关于我们，信息，图库......）左边有一个标志，现在我想在那个条形图中间放一些文字。我无法让它发挥作用。

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

/* 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>

4 个答案:

答案 0 :(得分：0)

你可以试试这个：
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;
}

以上操作将文本放置在距徽标和菜单相同的位置。因此，文本不会精确居中，但可能看起来更“正确”。

答案 1 :(得分：0)

以下是使用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>

答案 2 :(得分：0)

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

因此，要解决此问题，只需通过添加边距将文本拉向中心即可。 像这样：

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

在整页中查看此代码段以获取结果：

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我几乎只通过将导航和徽标放在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;
    }
相关问题
最新问题