我最近开始学习HTML和CSS,并且刚刚开始创建一个简单的网站,以尝试使用该语言。在我的主页上,我有一个div,其中将包含导航栏和我的标题。导航栏应位于div的右上角,然后标题应直接位于div的中心。

但是,每当我尝试使用text-align:centre时,它都永远不会放在中间。这就是我到目前为止所拥有的,https://jsfiddle.net/3qqjfy24/1/。请告诉我如何让“ Harry Brown”标题直接位于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;
}

最佳答案

试试这个:

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

关于html - 如何使用“text-align:centre”将页面上的元素水平居中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37678911/

10-12 12:30
查看更多