我最近开始学习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/