我怎样才能调整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>
