How to center two elements which are separately wrapped in <span>?

Question

I want to center a combination of css buttons in a page. I have set display: inline-block;. But they are aligning to left. I could center them if I add an additional div as parent element for the both and set them a id giving it a display:block.

Here is the css:

.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;
}

This is the code (custom function in WordPress theme. get_field is of Advanced Custom fields'):

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' );

Could any body suggest me how to do it keeping the php code intact and by just customizing the css?

Update: I was able to center the buttons after wrapping them with a new class. But here I am only able to center them if I use text-align:center. That temporarily enabled me achieve what I need. But I want to know why can't I achieve in the usual way- Fiddle

Answer 1

If you can consider using jQuery to wrap a div around the buttons, you can use this:

jQuery wrap All

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

Then you can apply css to .q-button-wrap.

Hope this helps.

Answer 2

easy to do just use display: inline-block

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

 display: inline-block;

Answer 3

Wrap both the spans in a parent element and center that element.