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


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:

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

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.


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


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


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

 .item-checkbox {
    border-top: 0px;
    padding-bottom: 0px;
     .item-checkbox:first-child {

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