Центрирование текста внутри заголовка

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.

Я попытался удалить изображение из дома pa ge и дает мой текст (заголовок Текст) те же значения. Я попытался изменить дисплей, используя clear eetc .. но ничего не получилось.

Заранее спасибо.

Answer 1

Вы можете использовать CSS Flexbox. Сделайте #headerText гибким контейнером и примените к нему правила центровки. Так же, как,

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

Посмотрите на ниже фрагменте кода:

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

Надежда это помогает!

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», поэтому я оставил это.