如何使用'文本对齐：中心'来水平集中页面上的项目？

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

如何使用'文本对齐：中心'来水平集中页面上的项目？

回答

相关问题