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 属性是块。尝试使用 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应该是这样的。这会很好地工作，您无需执行任何其他操作。

Glyphicon 显示在按钮文本上方

Glyphicon shows above the button text

html

css

button

twitter-bootstrap

glyphicons