Как центрировать два элемента, которые отдельно обернуты в <span>?

Question

Я хочу центрировать комбинацию кнопок css на странице. Я установил display: inline-block;. Но они выравниваются слева. Я мог бы центрировать их, если я добавлю дополнительный div в качестве родительского элемента для обоих и задаю им идентификатор, дающий ему display:block.

Вот CSS: (. Пользовательская функция в WordPress тему get_field имеет Advanced пользовательских полей)

.q-button { 
background-color: green; 
color: #FFF; 
min-width: 144px; 
text-decoration: none; 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
border: none; 
outline: none; 
height: 38px; 
margin-right: 10px; 
margin-bottom: 20px; 
line-height: 45px; 
font-size: 12px; 
padding: 0 20px; 
font-weight: bold; 
-webkit-transition: all .2s linear; 
-moz-transition: background .2s linear; 
-o-transition: all .2s linear; 
-ms-transition: all .2s linear; 
transition: all .2s linear; 
display: inline-block; 
text-transform: none; 
position: relative; 
} 

.q-button a { 
position: absolute; 
width: 100%; 
height: 100%; 
top: 0; 
left: 45px; 
text-decoration: none; 
z-index: 10; 
} 

#q-button-container{ 
left: 0; 
right: 0; 
margin: auto; 
width: 49px; 
display: block; 
display: inline-block; 
} 

Это код:

function custom_content_filter_the_content($content) { 
    if (function_exists('get_field')) { 
     $content .= '<span class="q-button" id="q-button-container" data-icon="a">' . get_field('website') . '</span>'; 
     $content .= '<span class="q-button" id="q-button-container" data-icon="a">' . get_field("website2") . '</span>'; 

    } 
    return $content; 
} 
add_filter('the_content', 'custom_content_filter_the_content'); 

Может ли тело предложить мне, как сделать это, сохраняя код php неповрежденным и просто настроив css?

Обновление: Я смог центрировать кнопки после их обертывания новым классом. Но здесь я могу только центрировать их, если я использую text-align:center. Это временно позволило мне достичь того, что мне нужно. Но я хочу знать, почему я не могу добиться этого обычным способом. Fiddle

Answer 1

Если вы можете рассмотреть возможность использования JQuery, чтобы обернуть DIV вокруг кнопок, вы можете использовать это:

jQuery wrap All

$(".q-button").wrapAll("<div class='q-button-wrap' />"); 

Затем вы можете применить CSS к .q-кнопочный обертку.

Надеюсь, это поможет.

Answer 2

Оберните оба пролета в родительском элементе и центрируйте этот элемент.

Answer 3

легко сделать просто использовать дисплей: встроенный блок

http://jsfiddle.net/robbiebardijn/q745U/

display: inline-block;