Glyphicon显示在按钮文本上方

Question

Glyph图标显示在Button Text上方。我尝试使用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

display标记的默认p CSS属性为block。请尝试使用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应该是这样的。这样可以正常工作，你不需要做任何其他事情。