如何使用IONIC框架在居中或右侧对齐按钮？
如何使用IONIC框架在居中或右侧对齐按钮？
提问于 2014-09-16 13:19:27
我想要在right中的登录和注册按钮，以及在Center中的搜索按钮，我搜索了很多，但没有得到任何解决方案。
另外，如何将文本区域对齐到合适的位置。
下面是我的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>我知道在bootstrap中，但我是新手，请告诉我如何做到这一点。
回答 8
Stack Overflow用户
回答已采纳
发布于 2014-09-16 13:24:27
我认为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%;
}Stack Overflow用户
发布于 2015-04-01 03:27:45
您应该将按钮放在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>
使用您的代码进行演示：
Stack Overflow用户
发布于 2017-08-15 23:00:42
要在ionic应用程序代码本身中使用居中对齐，可以使用以下代码：
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>要在ionic应用程序代码本身中使用右对齐，您可以使用以下代码：
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25861158
复制相关文章
相似问题