如何使用IONIC框架在中心或右侧对齐按钮？
Pre*_*pra 38 css ionic-framework
我想要右边的登录和注册按钮,中心的搜索按钮,我搜索了很多,但没有得到任何解决方案.
还有如何将文本区域对齐到合适的位置.
这是我的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>
我知道在引导程序中,但我是离子的新手,请告诉我我该怎么做.
小智 90
你应该把按钮放在div中,在div中你应该能够使用这些类:
text-left,text-center和text-right.
例如:
<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
Noo*_*tor 31
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%;
}
- 谢谢,它正在工作,请告诉我有关文本区域宽度的问题,如何以相同的宽度进行修复,现在它取决于文本区域前面的文本. (2认同)
Alv*_*iar 19
要在离子应用程序代码本身中使用中心对齐,您可以使用以下代码:
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>
要在离子应用程序代码本身中使用右对齐,您可以使用以下代码:
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
小智 6
最终，我们正在努力做到这一点。
<div style="display: flex; justify-content: center;">
<button ion-button>Login</button>
</div>