2016-08-29 11 views
0

現在、Ionicでアプリケーションを作成しています。このアプリケーションでは、数値を入力し、言語を選択すると別の言語の数値が出力されます。私はそれがすべて働いている、と私は今それをスタイリングしています。私は入力ボックスを除いて、すべてを中心にしています。私は多くを研究したが、同じものを見つけることはできない。 ここに私のHTMLの一部です:入力ボックスをIonicに中心合わせする方法

<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%; 
} 

もいくつかのJavascriptありますが、私は考えていませんそれはこれのための問題になるでしょう。 ありがとうございます!

答えて

0

ちょうど私がそれを修正するために管理

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%; 
 
}
<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 center" 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>

+0

ことはありません申し訳ありませんが要素を作るために必要なうまくいきませんでした。私はそれがイオンのビルトインクラスと関係していると思います。なぜなら、スタックオーバーフローでスニペットを実行すると動作しますが、イオン性のCSSがあれば動作しません。 –

+0

あなたのWebインスペクタを使用してCSS規則が上書きされる場所を特定するよりも... – andreas

+0

それは問題ではありません。それはインラインブロックにする必要があります –

0

あなたの入力にあなたのセンタークラスを追加...私はインラインブロックに

関連する問題