Логотипы не отображаются в том же положении

Question

У меня есть два логотипа, см. Рисунок ниже, который не отображается в том же столбце. Значок твиттера отображается в нескольких пикселях справа.

код выглядит следующим образом, который вставляет значки:

<ul class="social"> 
     <li> 
      <a title="" data-placement="top" data-toggle="tooltip" 
       class="facebook" 
       href="https://www.facebook.com/"> 
       <i class="fa fa-facebook"></i> 
       <span>&nbsp;&nbsp;&nbsp;Facebook</span> 
      </a> 
     </li> 
    </ul> 


<ul class="social"> 
     <li> 
      <a title="" data-placement="top" data-toggle="tooltip" 
       class="twitter" href="https://twitter.com/"> 
       <i class="fa fa-twitter"></i> 
       <span>&nbsp;&nbsp;&nbsp;Twitter</span> 
      </a> 
     </li> 
    </ul> 

CSS:

.bloggfb{ 
    width:100%; 
    text-align:center; 
} 

Как избавиться от пространства Infront иконы твиттер?

Answer 1

Я смотрю ваш сайт только сейчас. Добавьте это в CSS, и это работает хорошо в Chrome по крайней мере:

.social li a { 
display: table; 
margin-left: 50px; 
margin-top: 10px; 
} 

Answer 2

Это потому, что изображения & текст центрирован (оптическая иллюзия).

Когда Вы меняете text-align: center в text-align: left все должно быть нормально

.bloggfb{ 
    width: 100%; 
    text-align: left; 
} 

Если Вы все еще думаете, что это не является совершенным Вы всегда можете использовать position: relative & absolute сочетание как здесь:

.bloggfb li{ 
    position: relative; 
    } 

.bloggfb i{ 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

Каждый Элемент <i> будет установлен абсолютно в соответствии сэлемент с точностью 1px

Answer 3

Это причина:

.bloggfb { 
    width: 100%; 
    text-align: center; 
} 

Если изменить это text-align: left; как значок сделает хорошо.

Answer 4

Вы также можете попробовать дать общую ширину для обоих элементов, если вы чувствуете, что элемент находится слева, после выравнивания влево.

Попытка изменение ниже CSS в одиночку, чтобы сделать его в соответствии, а также сохранить как элемент в центре:

.social { 
display: inline-block; 
list-style: none; 
vertical-align: middle; 
width: 118px; 
text-align: left; 
} 

Надеется, что это, как вы хотели бы, чтобы внешний вид должен быть: