在导航标题HTML CSS

中央元件我已经做了导航标题（i.d.k.你怎么称呼它），我想一些文字是在它的中间。在导航标题HTML CSS

它基本上是一个黑色的条，在右边的一些导航按钮（如首页，关于我们，信息，画廊...）左侧一个标志，现在我想在栏的中间部分文本。我无法让它工作。

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

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

来源

2017-04-02 Werner Schoemaker

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

什么上面会做的就是把文本在距离相等的距离标志和菜单。所以，文字不会精确居中，但可能看起来更“正确”。

来源

2017-04-02 19:02:12 Bob

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

来源

2017-04-02 19:22:08 blackandorangecat

我打了一下周围，看着约flexboxes一些教程，但它仍然似乎没有正在工作。这可能是我没有足够清楚地解释我的问题。我希望文字集中在整个黑匣子中。与菜单和徽标距离不等。如果我可以从Flexbox中排除菜单和徽标，您的解决方案就可以工作。 –

@WernerSchoemaker哦。基本上你希望文本在Nav元素后面？ Gimmie秒... – blackandorangecat

只是为了澄清事情，我创造了一个我正在寻找的小素描。 https://drive.google.com/file/d/0BzqvOBblncladkV6a1dxNkszWlU/view?usp=sharing –

它已经是在中心，但它正在从原来的中心位置被推因为左边的右边和标识的菜单了。

所以解决这个问题，只是通过增加利润拉向中央的文字。像这样：

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

视图在整页此代码段的结果是：

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

来源

2017-04-03 15:41:03 Sudipto

我差点它通过将仅导航和标识工作一个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; 
    }

来源

2017-04-03 16:30:51

在导航标题HTML CSS

回答

相关问题