Centering a text inside a header

Question

I'm having a problem with centering a text inside my header.

For some reason on other pages it works but not on the home page

here is the snippet for the header in the home page

#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-->

In the other page the difference is that there is no headerPoster image

I tried removing the picture from the home page and giving my text (header Text) the same values. I tried changing the display, using clear eetc.. but nothing worked.

Thanks in advance.

Answer 1

Your header is painful... please try this:

.header-wrapper {
  top: 0;
  margin: 0;
  width: 100%;}
  
.header-nav {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  top: 0;
  width: 100%;}

.header-nav-element {
  float: left;}
  
.header-nav-link {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;}

.header-nav-logo {
  height: 48px;}

<div class="header-wrapper">
  <ul class="header-nav">
    <li class="header-nav-element"><a href="John McAfee.html"><img class="header-nav-logo" href="./images/headerText.png" alt="Logo"></a></li>
    <li class="header-nav-element"><a class="header-nav-link" href="background.html">Background</a></li>
    <li class="header-nav-element"><a class="header-nav-link" href="mission.html">Mission</a></li>
    <li class="header-nav-element"><a class="header-nav-link" href="agenda.html">Agenda</a></li>
    <li class="header-nav-element"><a class="header-nav-link" href="gallery.html">Gallery</a></li>
  </ul>
</div>

Run this on your pages and it'll put the image in there. Not sure what to do with the 'McAfee Poster' thing, so I left that out.

Answer 2

#headerText {
    text-align: center;
}

JSFiddle

Answer 3

It seems like the headerText is aligning to its parent paragraph tag, so setting the text alignment on the P should work:

#headerText p {text-align: center;}

Answer 4

You can use CSS Flexbox. Make #headerText a flex container and apply flexbox centering rules to it. Just like,

#headerText { 
  display: flex; /* Flex Container */
  align-items: center; /* Vertically Centers Child */
  justify-content: center;  /* Horizontally Centers Child */
  width: 100%;
  border: 2px solid red;
  z-index: 100;
}

#headerText p {
  margin: 10px 0;
  color: #fff;
}

Have a look at the snippet below:

#header {
    height: 400px;  
    width: 100%; 
    background-color: #272727;
    z-index: -1;
}
#headerImage {
    float:left;  
    margin: 20px 5px;   
}
#headerPoster {
    float: left;    
}
#headerText { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 2px solid red;
    z-index: 100;
}

#headerText p { margin: 10px 0; color: #fff; }

#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-->

Hope this helps!