ヘッダー内のテキストの中央揃え

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画像がないことです

私は家庭から画像を削除しようとしました私のテキスト（ヘッダーテキスト）に同じ値を与えます。私は明確なeetcを使用してディスプレイを変更しようとしました..しかし、何も働いていませんでした。

ありがとうございます。

Answer 1

CSSフレックスを使用できます。フレックスコンテナ#headerTextにフレックスボックスのセンタリングルールを適用します。このことができます

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

希望：ちょうど

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

は以下のスニペットを見て、好きです！

Answer 2

headerTextはそうP上のテキストの配置が動作するはず設定、その親段落タグに揃えているように思える：

#headerText p {text-align: center;} 

Answer 3

#headerText { 
    text-align: center; 
} 

JSFiddle

Answer 4

あなたのヘッダが痛いです...これを試してください：

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

これをあなたのページで実行すると、そこに画像が置かれます。 「McAfee Poster（マカフィーポスター）」と何をするべきかわからないので、私はそれを残しました。