在按鈕文本上方顯示圖標

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應該是這樣的。這樣可以很好地工作，你不需要做其他任何事情。