html - 文本不会在标题中居中

Question

我一直在尝试让“标题”文本居中并保留图标。

text-align: center; 对我不起作用。

谁能引导我朝着正确的方向前进？

谢谢。

IMG:

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

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