文字不会在标题中居中

Question

我一直试图获得＃34; Header＆＃34;要居中的文字和要留下的图标。

text-align: center;不能为我工作。

任何人都可以引导我朝着正确的方向前进吗？

感谢。

IMG：

＆＃13;

＆＃13;

    .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
      vertical-align: middle; 
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      display: inline-block;
    }

＆＃13;

<div class="headerwrapper">
      <div class="header">
    
      <div class="menuWrap">
        <div class="menu open">
          <span id="hamburger" class="fas fa-bars hvr-grow"></span>
        </div>
          <a href="index.php">Header</a>
      </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该将 text-align：center 添加到.header课程中。

除此之外，您还应将float:left;属性放在.menu类中。

以下是示例：

    .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
      text-align:center;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
      vertical-align: middle; 
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      display: inline-block;
      float:left;
    }

<div class="headerwrapper">
      <div class="header">
    
      <div class="menuWrap">
        <div class="menu open">
          <span id="hamburger" class="fas fa-bars hvr-grow">a</span>
        </div>
          <a href="index.php">Header</a>
      </div>
      </div>
    </div>

Answer 2

可以使用text-align: center;上的.header来完成居中。

但是，这也会影响您的汉堡包图标（我将其替换为＆＃34; X＆＃34;以使其可见），因此将position: absolute应用于其容器.menu并使用left参数定义距左边界的距离：

＆＃13;

＆＃13;

.header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
      text-align: center;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      position: absolute;
      left: 30px;
    }

＆＃13;

<div class="headerwrapper">
      <div class="header">
    
      <div class="menuWrap">
        <div class="menu open">
          <span id="hamburger" class="fas fa-bars hvr-grow">X</span>
        </div>
          <a href="index.php">Header</a>
      </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.header {
    padding-top: 15px;
    padding-bottom: 15px;
    color: #fff;
    background: #333;
    text-align: center;
}

.header a {
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 32px;
  vertical-align: middle; 
}

#hamburger {
  color: white;
  font-size: 32px;
}


.menu {
    display: inline-block;
    vertical-align: middle;
    float: left;
    padding: 0 0 0 15px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div class="headerwrapper">
      <div class="header">
    
      <div class="menuWrap">
        <div class="menu open">
          <span id="hamburger" class="fas fa-bars hvr-grow"></span>
        </div>
          <a href="index.php">Header</a>
      </div>
      </div>
    </div>

Answer 4

您需要在标题类.header中添加 text-align ，它应该与此类似

 .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
       text-align: center;
    }

Answer 5

像这样改变：

.header a { 
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  //Other css...
}

＆＃13;

＆＃13;

    .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
      vertical-align: middle; 
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      display: inline-block;
    }

＆＃13;

<div class="headerwrapper">
  <div class="header">

  <div class="menuWrap">

    <div class="menu open">
      <span id="hamburger" class="fas fa-bars hvr-grow">Icon</span>
    </div>

      <a href="index.php">Header</a>

  </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;