Ion-checkbox on a line as part of other active elements

Hi,

I would like to be able to include an ion-checkbox element on the same line as other elements and center them on the page.

This is a very simple pseudo-code example of what I am trying to do:

<center-it-on-a-single-line>
  <ion-checkbox ng-model="input.debug">
    Enable debugging,
  </ion-checkbox>
  click <a href="#/tab/more-info">here</a> for more information.
</center-it-on-a-single-line>

I want it to look something like this:

Can someone point me in the right direction?

I have tried enclosing the elements in float divs, i have tried inline-blocks and a number of other things but nothing works completely. In some cases the elements show up on separate lines. In others they are side by side but not centered. I have had some success using fixed widths but i would prefer not to to allow scaling to work correctly on different devices.

I have gotten it to work using a standard checkbox element like this but I really like the ion-checkbox and would prefer to use it.

HTML

<div class="center" style="margin-top: 5px;">
  <!-- make it a bit bigger for big thumbs -->
  <label>
    <input type="checkbox"
               ng-model="data.debug"
               style="min-height: 20px; min-width: 20px">
    Enable debugging,
  </label>
  click <a href="#/tab/more-info">here</a> for more information.

CSS

.center {
    position: relative;
    width: 100%;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
}

Thanks

I was able to put two checkboxes on a row by putting them in a DIV and then doing

 .item-checkbox {
    width:100px;
    border-top: 0px;
    padding-bottom: 0px;
}
     .item-checkbox:first-child {
        float:right;
}

Probably a similar purely CSS hack would work for other content.