在導航標題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

回答

相關問題