CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbuttonglyphicons
Ariel .H
Ariel .H

Reputation: 55

Glyphicon shows above the button text

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>

This is an image of how it looks.

Upvotes: 1

Views: 274

Answers (2)

Madhavi Shinde
Madhavi Shinde

Reputation: 41

  <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

Your HTML should be like this. This will work fine and you will not have to do anything else.

Upvotes: 0

Sebastian
Sebastian

Reputation: 525

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.

Upvotes: 1

Related Questions