Question

我在标题中居中存在问题。

出于某种原因，在其他页面上它可以工作但不在主页上

这是主页中标题的摘录

＆＃13;

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

＆＃13;

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

＆＃13;

在另一页中，区别在于没有headerPoster图像

我尝试从主页中删除图片并为我的文本（标题文本）提供相同的值。我尝试使用清晰的eetc改变显示器......但没有任何效果。

提前致谢。

Answer 1

#headerText {
    text-align: center;
}

JSFiddle

Answer 2

您可以使用 CSS Flexbox 。使bundle.setClassLoader(getClass().getClassLoader());成为灵活容器，并对其应用flexbox居中规则。就像，

#headerText

请看下面的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

Answer 3

看起来headerText与其父段落标记对齐，因此在P上设置文本对齐应该有效：

#headerText p {text-align: center;}

Answer 4

你的标题很痛苦......请试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

在您的网页上运行此功能，然后将图像放入其中。不确定如何处理“McAfee Poster＆＃39;事情，所以我把它留了出来。

将标题中的文本居中

4 个答案: