버튼 텍스트 위에 글리프콘이 표시됩니다.

Question

글리프 아이콘이 버튼 텍스트 위에 표시됩니다. vertical-align: middle;을 사용해 보았지만 여전히 작동하지 않습니다.

코드 : p 태그

<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

기본 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은 이와 같아야합니다. 이 작업은 정상적으로 작동하므로 다른 작업을 수행하지 않아도됩니다.