Как выровнять кнопку Вконтакте «Поделиться» по центру в колонке bootstrap?

Question

[Павел Гольцев]

Всем привет! Вставил на сайт кнопку Поделиться из контакта, но она прилипает к левому краю. Помимо этой кнопки вставил еще из одноклассников и фейсбука. Две последние отлично выравниваются по центру с помощью css-класса 'text-center'. Выглядит это примерно вот так:

<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 text-center">

Но для контакта это не работает. Кнопка упорно прилипает к левому краю. Кто сталкивался, подскажите, как решали? Спасибо.

Answer 1

[Vanger]

getbootstrap.com/css/#helper-classes-center думаю должно хватить

Comments

[Павел Гольцев]

К сожалению, не работает ни в div'е с col, ни при добавлении внутрь еще одно дива с этим классом. Есть еще варианты? )

Answer 2

[Павел Гольцев]

Вопрос помог решить комментарий от Vanger и знакомый frontend разработчик. Сделал следущее:

<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
  <div class="center-block" style="width: 84px;">
  // тут кнопка контакта
  </div>
</div>

Немного костыльное решение, поскольку присутствует магическое число 84)) Это размер кнопки контакта, подсмотренный в Developer Tools. Как объяснил знакомый, кнопка реализована, как блочный элемент, у которого ширина - 100%. Чтобы заработало выравнивание, размер блока нужно задать явно. Что я и сделал. Меня, конечно, немного напрягает, что размер для кнопки задан явно, а не вычисляется динамически, но ничего не поделаешь.
Для тех, кто столкнется с аналогичной проблемой, есть еще вариант не встраивать кнопку из контакта, а сделать в виде ссылки, которая открывает окно "Поделиться" в отдельном окне. Как это сделать, можно подсмотреть на хабре или найти на сайте самого контакта. Всем спасибо.