2014-09-15 4 views
0

Я создаю сайт с Bootstrap 3. Я пытаюсь правильно выровнять текст и значки. Например, я хочу показать следующее:Выравнивание текста и значков в Bootstrap 3

[icon] 12 products 

и

visit now [icon] 

В первой, glyphicon показан слева от текста. Во втором, глификон показан справа от текста. Моя проблема заключается в том, что независимо от того, что я делаю, текст не выравнивается по вертикали со значком. Например, со следующим HTML, метка отображается на несколько пикселей ниже значка. Я хочу, чтобы текст был вертикально центрирован значком или наоборот. Я просто не хочу, чтобы это выглядело таким сумасшедшим.

<ul class="list-inline pull-right"> 
    <li><span class="pull-right">visit now</span></li> 
    <li style="padding-left:0px;"><i class="glyphicon glyphicon-circle-arrow-right"></i></li> 
</ul> 

Я не уверен, как это исправить, чтобы текст выравнивался правильно.

+0

Почему ваш значок в отдельном элементе списка для текста? – Luke

+1

попробуйте изображение изображения и текст в том же ли. –

+0

@CodeL ღ ver, когда я помещаю значок и текст в один и тот же li, текст по-прежнему отображается на несколько пикселей ниже значка. – user70192

ответ

2

Это прекрасно работает. DEMO

<ul class="list-inline pull-right"> 
    <li><span>visit now</span><i class="glyphicon glyphicon-circle-arrow-right"></i></li> 
</ul> 
Смежные вопросы