グリフコンがボタンのテキストの上に表示されます

Question

グリフのアイコンがボタンのテキストの上に表示されます。私はvertical-align: middle;を使ってみましたが、まだ動作しません。

コード：

<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

pタグのデフォルトdisplay CSS属性はブロックです。代わりにspanを使用してみてください。アイコンがまだアイコンの下に表示されている場合は、ボタンwidthを変更するか、アイコンのdisplay CSSプロパティをinline-blockに設定してみてください。

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 

あなたのHTMLはこのようにする必要があります。これは正常に動作し、何もする必要はありません。