Stack glyphicon над текстом

Question

Вот мой HTML (он не может быть изменен)

Как укладывать значок над текстом? (Это должно быть по центру)

.quicklinks { 
 
    li { 
 
    a { 
 
     font-size: 10px; 
 
     text-transform: uppercase; 
 
     .glyphicon { 
 
     font-size: 26px; 
 
     } 
 
    } 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="quicklinks col-md-offset-8 col-md-4"> 
 
    <ul class="list-inline text-right nav navbar-nav"> 
 
    <li id="index"> 
 
     <a href="/en/index"> 
 
     <span class="glyphicon glyphicon-home" title="Home"></span> Home 
 
     </a> 
 
    </li> 
 
    <li id="index"> 
 
     <a href="/en/index"> 
 
     <span class="glyphicon glyphicon-user" title="User"></span> Home 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

Просто добавьте следующий CSS, который заставит промежуток занять 100% ширины, толкая текст ниже:

.glyphicon { 
    display:block; 
    text-align:center; 
} 

Кроме того, я предполагаю, что ваш код является просто примером для воспроизведения вашей проблемы, но в код, который вы предоставили, у вас есть два элемента li с тем же идентификатором, который равен not valid HTML.

Bootply