Glyphicon shows above the button text

Question

The Glyph-icon shows above the Button Text. I tried using vertical-align: middle; But it does not work still.

Code :

<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

The default display CSS attribute for the p tag is block. Try using a span instead. If the text still shows up below the icon, try changing the button width or setting the display CSS property of the icon to inline-block.