Search code examples
phpcsscenterdisplaytag

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

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

Solution

  • 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.