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