我怎样才能调整button在中心或正确使用IONIC框架?

在这里输入图像说明

我想login和注册button在右边 ,searchbutton在中心 ,我search了很多,但没有得到任何解决scheme。

而且我怎样才能在正确的位置alignment文本区域。

这是我的html代码:

<body ng-app="starter"> <ion-pane style = "background-color:#4992E2;"> <ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;"> <h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1> </ion-header-bar> <ion-content > <div class = "row center"> <div class="col"> <button class="button button-small button-light" > Login! </button> <button class="button button-small button-light"> Register Here! </button> </div> </div> <div class="item-input-inset"> <h4>Date</h4> <label class="item-input-wrapper"> <input type="text" placeholder="Text Area"> </label> </div> <div class="item-input-inset"> <h4>Suburb</h4> <label class="item-input-wrapper"> <input type="text" placeholder="Text Area"> </label> </div> <div class="item-input-inset"> <h4>Clinic</h4> <label class="item-input-wrapper"> <input type="text" placeholder="Text Area"> </label> </div> <button class=" center button button-small button-light"> Search </button> </ion-content> </ion-pane> </body> 

我知道在自举 ,但我是新来的离子,请告诉我,我怎么能做到这一点。

Css将以我假设的相同方式工作。

你可以用这样的内容来集中内容:

 .center{ text-align:center; } 

更新

要以适当的方式调整宽度,请修改您的DOM,如下所示:

 <div class="item-input-inset"> <label class="item-input-wrapper"> Date <input type="text" placeholder="Text Area" /> </label> </div> <div class="item-input-inset"> <label class="item-input-wrapper"> Suburb <input type="text" placeholder="Text Area" /> </label> </div> 

CSS

 label { display:inline-block; border:1px solid red; width:100%; font-weight:bold; } input{ float:right; /* shift to right for alignment*/ width:80% /* set a width, you can use max-width to limit this as well*/ } 

演示

最终更新

如果你不打算修改现有的HTML( 原来在你的问题之一 ),下面的CSS会让我最好的朋友! 🙂

 html, body, .con { height:100%; margin:0; padding:0; } .item-input-inset { display:inline-block; width:100%; font-weight:bold; } .item-input-inset > h4 { float:left; margin-top:0;/* important alignment */ width:15%; } .item-input-wrapper { display:block; float:right; width:85%; } input { width:100%; } 

演示

你应该把button放在一个div中,在div里你应该可以使用这些类:
文本左侧文本中心文本右侧

例如:

 <div class="row"> <div class="col text-center"> <button class="button button-small button-light">Search</button> </div> </div> 

而关于“textarea”的位置:

 <div class="list"> <label class="item item-input"> <span class="input-label">Date</span> <input type="text" placeholder="Text Area"> </label> 

使用你的代码演示:
http://codepen.io/douglask/pen/zxXvYY

要使用离子应用程序代码本身的中心alignment方式,可以使用以下代码:

 <ion-row center> <ion-col text-center> <button ion-button>Search</button> </ion-col> </ion-row> 

要在离子应用程序代码中使用正确的alignment方式,可以使用以下代码:

 <ion-row right> <ion-col text-right> <button ion-button>Search</button> </ion-col> </ion-row> 

如果我们想要将checkboxalignment,我们可以使用item-end。

 <ion-checkbox checked="true" item-end></ion-checkbox> 

center标签按预期alignment其中的button:

 <ion-footer> <ion-toolbar> <center> <button royal> Contacts <ion-icon name="contact"></ion-icon> </button> <button secondary> Receive <ion-icon name="arrow-round-back"></ion-icon> </button> <button danger> Wallet <ion-icon name="home"></ion-icon> </button> <button secondary> Send <ion-icon name="send"></ion-icon> </button> <button danger> Transactions <ion-icon name="archive"></ion-icon> </button> <button danger> About <ion-icon name="information-circle"></ion-icon> </button> </center> </ion-toolbar> </ion-footer>