How to center two elements which are separately wrapped in ?


Tags: php,css,center,displaytag

Problem :

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.


    CSS Howto..

    How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]

    How to set position of checkbox to middle of td and input type text using css? [duplicate]

    How page turn effect work in turn.js

    How to implement z-index and overflow

    How to clear the parent css

    css: how to format contact entry screen

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How to unbind() a hover/ mouseover event?

    How to debug CSS bundled by Webpack?

    How to force elements to stay in the same row

    How to add external css into html

    How to get conditional css to work on Blogger/Blogspot?

    How to add some non-standard font to a website?

    How to set css styles with variables in rails if certain item is selected?

    How do I scale an SVG background-image without honoring aspect ratio in Firefox?

    How to add vertical gradient using css?

    how to move button to left

    How to center text inside a div element? [duplicate]

    How to detect CSS translate3d without the webkit context?

    How to reduce div size in CSS using twitter bootstrap?

    How to write multiple css selectors in one line?

    How to calculate gradient color replacements?

    how to add class to razor form and give padding?

    How to change active link color in bootstrap css?

    How to fix a div below the header after scrolling it up?

    How can I make a sub-menu appear adjacent to main menu and not below it with css?

    CSS - How to get star aligned properly on this page

    How to make images inside a box responsive CSS

    how to add an image on a div without losing previous content in CSS hover effect

    How does changing the display attribute in the styling of an element hide/show it?