0
현재 이오닉에서는 숫자를 입력하고 언어를 선택하면 다른 언어로 번호가 인쇄되는 응용 프로그램을 작성하고 있습니다. 나는 모든 것을 작동 시켰고, 이제 나는 그것을 스타일링하고있다. 입력 상자를 제외하고 모두 중앙에 배치했습니다. 나는 많은 것을 연구했지만 똑같은 것을 찾을 수 없다. 여기 내 HTML의 일부입니다 :입력 상자를 이오 닉 중심에 맞추는 방법
<ion-content class="padding" id="ion-content">
<div class="container-fluid">
<div class="row center">
<div class="col"><h1>Please Enter Your Phone Number:</h1></div>
</div>
<div class="row">
<div class="col col-100 center" style="display:block;">
<input type="tel" ng-model="number" class="borders" name="number">
</div>
</div>
<div class="row center">
<div class="col">
<select id="select" ng-model="language">
<option value="French">FRENCH</option>
<option value="German">GERMAN</option>
<option value="English">ENGLISH</option>
<option value="Mandarin">MANDARIN</option>
<option value="Swedish">SWEDISH</option>
<option value="Latin">LATIN</option>
<option value="Bulgarian">BULGARIAN</option>
<option value="Turkish">TURKISH</option>
</select>
</div>
</div>
<div class="row center"><div class="col">
<button class="Nextbutton" ng-click="doit(number,language)">
<h1>TRANSLATE</h1></button>
</div>
이 가 여기 내 CSS (즉 모든 것을 내 문제와 관련된입니다) :
body{
}
.center {
text-align:center;
}
.firstinput {
}
h1 {
font-family:Impact, Charcoal, sans-serif;
font-variant: small-caps;
}
#change {
font-family:Impact, Charcoal, sans-serif;
font-variant: small-caps;
font-size: 20px;
}
.borders {
border-radius: 10px;
margin:10px;
font-family:Impact, Charcoal, sans-serif;
border-color:black;
}
select {
margin:10px;
font-family:Impact, Charcoal, sans-serif;
font-variant: small-caps;
font-size: 15px;
}
input-label {
width:30%;
}
일부 자바 스크립트가 그러나 나는 생각하지 않는다 그것은 이것이 문제가 될 것입니다. 미리 감사드립니다.
이 없음 미안 요소를 만드는 데 필요한 did not work, 나는 ionic built-in class와 관련이 있다고 생각한다. 왜냐하면 stack overflow에서 snippet을 실행하면 작동하지만, ionic의 CSS를 모두 사용하면 작동하지 않는다. –
웹 속성을 사용하여 CSS 규칙을 덮어 쓰는 위치를 파악하는 것보다 ... – andreas
인라인 블록이 필요합니다. –