在按钮文本上方显示图标

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应该是这样的。这样可以很好地工作，你不需要做其他任何事情。