Ariel .H Ariel .H - 4 months ago 18
CSS Question

Glyphicon shows above the button text

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

<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>


This is an image of how it looks.

Answer Source

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.