html - 将标题内的文本居中

Question

我在将标题中的文本居中时遇到问题。

由于某些原因，它在其他页面上有效，但在主页上无效

这是主页标题的片段

#header {
    height: 400px;  
    width: 100%; 
    background-color: #272727;
    z-index: -1;
}
#headerImage {
    float:left;  
    margin: 20px 5px;   
}
#headerPoster {
    float: left;    
}
#headerText { 
    display: inline-block;
    width: 100%;
    margin: 0px auto; 
    position: relative;
    border: 2px solid red;
    z-index: 100;
}
#bannerText {
    display: inline-block;
    margin: 0 auto; 
    width: 100%;
    position: relative;
}
#nav {
    float: right; 
    margin-top: 40px;
    margin-right: 10px;
}
#nav li {
    display: inline-block; 
    list-style-type: none;
}

#nav li a { 
    margin-left: 30px;
    padding-left: 5px;
    text-decoration: none;
}

<div id="header">
        <a href="John McAfee.html"><img id="headerImage" src="./images/headerText.png" alt="Logo" /></a>
        <img id="headerPoster" src="./images/mcAfeeposter.png" alt="McAfee Poster" /> 
        <ul id="nav">
            <li><a href="Background.html">Background</a></li>
            <li><a href="Mission.html">Mission</a></li>
            <li><a href="Agenda.html">Agenda</a></li>
            <li><a href="Gallery.html">Gallery</a></li>
        </ul> 
        <div id="headerText"> <p> LIBERTY PRIVACY TECHNOLOGY AMERICA </p></div> 
        <!--<div id="headerButton"> SECURE YOUR FUTURE  </div>-->
    </div>  <!-- End of header div-->

在另一个页面不同的是没有headerPoster图片

我尝试从主页中删除图片并为我的文本(标题文本)提供相同的值。我尝试更改显示，使用 clear eetc.. 但没有任何效果。

提前致谢。

Answer 1

#headerText {
    text-align: center;
}

JSFiddle