Question

enter image description here

我想要正确中的登录和注册按钮，以及中心中的搜索按钮，我搜索了很多但没有得到任何解决方案。

此外，我如何将文本区域对齐到正确的位置。

这是我的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 ，但我是离子新手，请告诉我该怎么做。

Answer 1

您应该将按钮放在div中，并且在div中您应该能够使用这些类：
text-left ， text-center 和文字右侧。

例如：

<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

Answer 2

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*/
}

Demo

最终更新

如果您不打算修改现有的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%; }

Demo

Answer 3

要在离子应用程序代码本身中使用中心对齐，您可以使用以下代码：

<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>

Answer 4

如果我们想要将复选框对齐，我们可以使用item-end。

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

Answer 5

另一种离子方式。使用此ion-buttons标签和正确的关键字将该组中的所有按钮放在右侧。我在一条线上制作了一些我想要的自定义切换按钮，但该组是正确的。

＆＃13;

search_string = 'we'
Sample.objects.filter(Q(name__istartswith=search_string) | Q(name__icontains=' ' + search_string))

＆＃13;

Answer 6

我找到了最好的解决方案，只需用div包裹按钮，然后将text-center align-items-center放在其中：

top

Answer 7

最终，我们正在努力做到这一点。

dataset
                                                  test                             new       names              numbers
1  R4 8561   200 365801HARLAN     16161616116616166116 HARLAN     16161616116616166116      HARLAN 16161616116616166116
2  R5 8533   100 472801WHITE      11611111111111111111 WHITE      11611111111111111111       WHITE 11611111111111111111
3  R4 8573   100 485101MCKENNA    11611161161111611161 MCKENNA    11611161161111611161     MCKENNA 11611161161111611161
4  R6 8513   200 489801HOLMES     66116111611161111161 HOLMES     66116111611161111161      HOLMES 66116111611161111161
5  R4 8522   200 492201DAY        11111611111111116111 DAY        11111611111111116111         DAY 11111611111111116111
6  R6 8548   100 500901LURTON     11116111911161111111 LURTON     11116111911161111111      LURTON 11116111911161111111
7  R5 8547   100 507322HUGHES     16611111111161116611 HUGHES     16611111111161116611      HUGHES 16611111111161116611
8  R4 85 3   100 518001VANDEVANTER99999911111111111111 VANDEVANTER99999911111111111111 VANDEVANTER 99999911111111111111
9  R5 8553   100 521301LAMAR      99999911111111111111 LAMAR      99999911111111111111       LAMAR 99999911111111111111

Answer 8

center标记按预期对齐其中的按钮：

<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>

如何使用IONIC框架在中心或右侧对齐按钮？

8 个答案: