Glyphicon zeigt oberhalb des Button-Textes

Question

Das Glyph-Icon zeigt oberhalb des Button-Textes. Ich habe versucht mit vertical-align: middle; Aber es funktioniert immer noch nicht.

Code:

<li> 
    <button class="btn btn-default dropdown-toggle" type="button" id="buttonuser" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <span class="glyphicon glyphicon-user" style="font-size: 30px; vertical-align: middle;"></span> 
      <?php 
       if (isset($_SESSION['vorname'], $_SESSION['nachname'])) { 
        echo "<p>" . $_SESSION['vorname'] . " " . $_SESSION['nachname'] . "</p>"; 
       } 
      ?> 
    </button> 
</li> 

Answer 1

Das Standard display CSS-Attribut für den p Tag ist Block. Verwenden Sie stattdessen eine span. Wenn der Text weiterhin unterhalb des Symbols angezeigt wird, versuchen Sie, die Schaltfläche width zu ändern oder die CSS-Eigenschaft display auf inline-block zu setzen.

Answer 2

<li> 
<button class="btn btn-default dropdown-toggle" type="button" id="buttonuser" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <?php 
      if (isset($_SESSION['vorname'], $_SESSION['nachname'])) { 
       echo "<p>" . $_SESSION['vorname'] . " " . $_SESSION['nachname'] . "</p>"; 
      } 
     ?> <span class="glyphicon glyphicon-user" style="font-size: 30px; vertical-align: middle;"></span> 
</button></li 

Ihr HTML sollte so sein. Dies wird gut funktionieren und Sie müssen nichts anderes tun.