Ich habe versucht, den "Header" -Text zu zentrieren und das Symbol beizubehalten.

text-align: center; funktioniert bei mir nicht.

Kann mich jemand in die richtige Richtung führen?

Vielen Dank.

IMG:

enter image description here

    .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>
1
Zaedian 18 Apr. 2018 im 16:08

5 Antworten

Beste Antwort

Die Zentrierung kann mit text-align: center; auf .header erfolgen.

Dies wirkt sich jedoch auch auf Ihr Hamburger-Symbol aus (das ich unten durch ein "X" ersetzt habe, um es sichtbar zu machen). Wenden Sie also position: absolute auf den Container .menu an und verwenden Sie den Parameter left für Definieren Sie den Abstand vom linken Rand:

.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;
    }
<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>
2
Johannes 18 Apr. 2018 im 13:19

Sie sollten text-align: center in Ihre .header Klasse einfügen.

Darüber hinaus sollten Sie die Eigenschaft float:left; in die Klasse .menu einfügen.

Hier ist das Beispiel:

    .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>
3
Martin 18 Apr. 2018 im 13:20
.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>
1
HTML CSS Hupp Technologies 18 Apr. 2018 im 13:13

Sie müssen Ihrer Headerklasse .header text-align hinzufügen. Dies sollte ähnlich aussehen

 .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
       text-align: center;
    }
1
Chopi 18 Apr. 2018 im 13:13

So ändern:

.header a { 
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  //Other css...
}
    .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;
    }
<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>
0
Ehsan 18 Apr. 2018 im 13:28