如何使用'文本對齊：中心'來水平集中頁面上的項目？

我最近開始學習HTML和CSS，並剛剛開始創建一個簡單的網站，只是爲了試驗語言。在我的主頁上，我有一個div，其中將包含導航欄和我的標題。導航欄應該位於div的右上角，然後標題應該直接位於div的中心。如何使用'文本對齊：中心'來水平集中頁面上的項目？

但是，只要我嘗試使用text-align:centre，它永遠不會放在中心位置。這是我到目前爲止，https://jsfiddle.net/3qqjfy24/1/。請有人告訴我如何讓'哈利布朗'標題直接坐在div的中心（水平和垂直）。

<div id="nav"> 
    <ul id="bar"> 
     <li>Home</li> 
     <li>About</li> 
     <li>Projects</li> 
     <li>Contact</li> 
    </ul> 
    <h1>Harry Brown</h1> 
</div>

這是CSS：

#nav { 
background-color: orange; 
width: 100%; 
height: 250px; 
} 
#bar { 
    float: right; 
    padding-right: 10px; 
} 

#bar li { 
    display: inline-block; 
    margin-right: 5px; 
    border-color: white; 
    border-style: solid; 
    border-width: 2px; 
    padding: 5px 5px 5px 5px; 
    color: white; 
    text-transform: uppercase; 
    font-family: Tahoma, 'Geneva', sans-serif; 
} 

#nav h1 { 
    color: black; 
    position: absolute; 
    text-transform: uppercase; 
    font-family: Tahoma, 'Geneva', sans-serif; 
}

來源

2016-06-07 Harry Brown

歡迎SO。你確定自己創建一個設計嗎？有數以千計的免費設計，這將有助於節省您的時間和問題。檢查oswd.org – etalon11

爲什麼你不使用像這樣的保證金https://jsfiddle.net/sank8893/3qqjfy24/5/ – Sankar

試試這個：

#nav h1 { 
    color: black; 
    text-transform: uppercase; 
    font-family: Tahoma, 'Geneva', sans-serif; 
    text-align:center; 
}

來源

2016-06-07 12:18:00 LuisPinto

工作液： https://jsfiddle.net/feyvor8m/

#nav { 
background-color: orange; 
width: 100%; 
height: 250px; 
} 
#bar { 
text-align: right; 
padding-right: 10px; 
} 
#bar li { 
display: inline-block; 
margin-right: 5px; 
border-color: white; 
border-style: solid; 
border-width: 2px; 
padding: 5px 5px 5px 5px; 
color: white; 
text-transform: uppercase; 
font-family: Tahoma, 'Geneva', sans-serif; 
} 

#nav h1 { 
color: black; 
text-transform: uppercase; 
font-family: Tahoma, 'Geneva', sans-serif; 
text-align: center; 
}

我希望我理解你的問題很好。無需浮動菜單，也不需要h1的絕對位置。

來源

2016-06-07 12:19:06

歡迎來到StackOverflow。請查看幫助菜單，瞭解有關提問或不提問以及如何提問的問題。你必須通讀css教程，網上有很多教程。

並針對您的問題的答案

您應該使用文本對齊。它將文本和其他內嵌內容對齊。它不會對齊塊元素的子元素。

#nav h1 { 
    color: black; 
    position: absolute; 
    text-transform: uppercase; 
    text-align:center 
    font-family: Tahoma, 'Geneva', sans-serif; 
}

來源

2016-06-07 12:19:45

做到這一點，希望這是你想要的。

標題完全位於div的中心，而欄位於屏幕的右側。

CSS

#nav { 
    background-color: orange; 
    width: 100%; 
    height: 250px; 

} 
#bar { 
    float: right; 
    postition: absolute; 
    display: inline; 
} 

#bar li { 
    display: inline-block; 
    margin-right: 5px; 
    border-color: white; 
    border-style: solid; 
    border-width: 2px; 
    padding: 5px 5px 5px 5px; 
    color: white; 
    text-transform: uppercase; 
    font-family: Tahoma, 'Geneva', sans-serif; 
} 

h1 { 
    color: black; 
    text-transform: uppercase; 
    font-family: Tahoma, 'Geneva', sans-serif; 
    postition: absolute; 
    margin-left: 40%; 
    display: inline-block; 
    margin-top: 15px; 
}

這裏是工作的解決方案：https://jsfiddle.net/3qqjfy24/16/

來源

2016-06-07 12:34:57 hulkinBrain

如何使用'文本對齊：中心'來水平集中頁面上的項目？

回答

相關問題