html - Glyphicon 显示在按钮文本上方

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 属性是 block。尝试使用 span 代替。如果文本仍然显示在图标下方，请尝试更改按钮 width 或将图标的 display CSS 属性设置为 inline-block。