Как я могу выровнять кнопку в центре или вправо, используя структуру IONIC?
![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>
Я знаю в бутстрапе, но я новичок в ионной, скажите, пожалуйста, как я могу это сделать.
Ответы
Ответ 1
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
Вы должны поместить кнопку внутри 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
Ответ 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>
Ответ 4
И если мы хотим выровнять флажок справа, мы можем использовать end-end.
<ion-checkbox checked="true" item-end></ion-checkbox>
Ответ 5
Другой ионический путь. Используя этот тег иконок для кнопок и правильное ключевое слово помещает все кнопки в этой группе вправо. Я сделал некоторые пользовательские кнопки переключения, которые я хотел на одной строке, но группа была правильно оправдана.
<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>
Ответ 6
Тег 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>