2016-11-16 21 views
0

フォーム全体のセンタリングに必要なヘルプ。ブラウザのウィンドウが小さくなったり、入力フィールドがそれに応じて調整されたりすると、フォームが中央に収まるようにします。お問い合わせフォームCSS

あなたがする必要はありません

/* CSS goes below this line! */ 
 

 
#ois-2 .ois-14-button, #ois-2 input[type='submit'].ois-14-button { 
 
\t background-color: #fd3f3f !important; 
 
\t border-color: #fd3f3f !important; 
 
\t border-width: 0px !important; 
 
\t font-size: 16px !important; 
 
\t font-family: 'Helvetica', Helvetica, sans-serif !important; 
 
\t height: 31px !important; 
 
\t border-radius: 7px !important; 
 
\t color: #ffffff !important; 
 
\t font-weight: 400 !important; 
 
\t width: 200px !important 
 
} 
 
#ois-2 .ois-14-email-input { 
 
\t padding-bottom: 4px !important; 
 
\t padding-left: 5px !important; 
 
\t padding-right: 2px !important; 
 
\t padding-top: 4px !important; 
 
\t text-align: left !important; 
 
\t width: 200px !important; 
 
\t border-radius: 5px !important; 
 
\t margin-top: 10px !important; 
 
\t margin-bottom: 10px !important; 
 
} 
 
#ois-2 .ois-14-Name-input { 
 
\t padding-bottom: 4px !important; 
 
} 
 
#ois-2 .ois-14-name-input { 
 
\t padding-left: 5px !important; 
 
\t padding-right: 2px !important; 
 
\t padding-top: 4px !important; 
 
\t text-align: left !important; 
 
\t width: 200px !important; 
 
\t border-radius: 5px !important; 
 
\t margin-top: 10px !important; 
 
\t margin-bottom: 0px !important; 
 
} 
 

 
#ois-2 .ois-14-title { 
 
\t text-align: center !important; 
 
\t font-size: 18px !important; 
 
\t font-family: 'Helvetica', Helvetica, sans-serif !important; 
 
\t line-height: 21px !important; 
 
\t font-weight: 700 !important; 
 
\t margin-top: 0px !important; 
 
\t margin-bottom: 10px !important; 
 
} 
 
#ois-2 .ois-14-inner { 
 
\t border-color: #efefef !important; 
 
\t border-width: 1px !important; 
 
\t background-color: #e2e2e2 !important; 
 
\t border-radius: 4px !important; 
 
\t padding-bottom: 10px !important; 
 
\t padding-top: 10px !important; 
 
\t padding-left: 10px !important; 
 
\t padding-right: 10px !important; 
 
} 
 
#ois-2 .ois-14-outer { 
 
\t margin-top: 5px; 
 
\t margin-bottom: 5px; 
 
\t margin-left: 0px; 
 
\t margin-right: 0px; 
 
} 
 
#ois-2 .ois-14-form { 
 
\t text-align: center !important; 
 
} 
 

 
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;} 
 
#left {margin-right: 20px; } 
 
#right { margin-right: 0px; } 
 
label {float: left;} 
 
input {clear: both;; float: left} 
 

 

 
/* End custom style */ 
 
/* End of file */
<div class='ois-design'> 
 

 
\t <div id='ois-2' class='ois-design' > 
 
<div class="ois-outer ois-14-outer"> 
 
\t 
 
<div class="ois-14-inner ois-inner"> 
 

 
<div class="ois-14-title"> 
 
Enter your name & email for access to our class schedule and amazing web special!</div> 
 
\t \t 
 
<div class="ois-14-subtitle"></div> 
 
\t \t 
 
\t \t 
 
<div class="ois-14-form"> 
 
\t \t \t 
 
<form method="post" id="ois-form-2" data-service="aweber" > 
 
<div class="ois-14-name-input-wrapper"> 
 
<fieldset id="left"> 
 
<input type="text" name="name" class="ois-14-name-input ois-name-input ois-form-control" placeholder="Your Name"></fieldset> 
 

 
<fieldset id="right"> 
 
<input type="text" name="email" class="ois-14-email-input ois-email-input ois-form-control" placeholder="Your Email"></fieldset> 
 
</div> 
 

 
<div class="ois-14-button-wrapper"> 
 

 
<input type="submit" class="ois-btn ois-14-button" /> 
 
</div> 
 
</form> 
 
\t \t </div> 
 
\t 
 
</div> 
 

 
</div> 
 
</div> 
 

 
</div>

+2

あなたはおそらく何か間違ったことをやっているimportant'! '使用している場合。また、簡略化されたルールを使用することで、CSSを大幅に簡素化(読みやすく)することができます。 – Dai

+1

その他のヒント:入力ラベルに 'placeholder =" "'属性を使用しないでください。値があるときにテキストが消えるからです。また、テキストアンパサンドを正確にエンコードする必要があります( '& 'へ)。マークアップが正しく意図されていないため、読みやすくなりません。 – Dai

答えて

0

...半分を中心としているようだと、左半分の整列が、私はそれと遊んだし、それが移動したくありませんでした入力フィールドは、あなたが

input[type="text"] { 
    width: 30vw; 
} 
を使用することができ、幅の

をフロートさせます210

Jsfiddleは、特に入力にすべての山車を削除し、私はカップルの事を変更した

https://jsfiddle.net/fae4xb7e/

1

の下に取り付けた、もう少し明確にあなたのdivを再構築し、フォームにmargin: autoを追加しました。あなたのマークアップを再考することを提案し、より少ないクラスを持つこともお勧めします。それらの多くは重複しており、同じことをしています。

fieldset { 
    display: inline-block; 
    width: 200px; 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 

#ois-2 .ois-14-button, #ois-2 input[type='submit'].ois-14-button { 
 
    background-color: #fd3f3f !important; 
 
    border-color: #fd3f3f !important; 
 
    border-width: 0px !important; 
 
    font-size: 16px !important; 
 
    font-family: 'Helvetica', Helvetica, sans-serif !important; 
 
    height: 31px !important; 
 
    border-radius: 7px !important; 
 
    color: #ffffff !important; 
 
    font-weight: 400 !important; 
 
    width: 200px !important 
 
} 
 
#ois-2 .ois-14-email-input { 
 
    padding-bottom: 4px !important; 
 
    padding-left: 5px !important; 
 
    padding-right: 2px !important; 
 
    padding-top: 4px !important; 
 
    text-align: left !important; 
 
    width: 200px !important; 
 
    border-radius: 5px !important; 
 
    margin-top: 10px !important; 
 
    margin-bottom: 10px !important; 
 
    margin: auto; 
 
} 
 
#ois-2 .ois-14-Name-input { 
 
    padding-bottom: 4px !important; 
 
} 
 
#ois-2 .ois-14-name-input { 
 
    padding-left: 5px !important; 
 
    padding-right: 2px !important; 
 
    padding-top: 4px !important; 
 
    text-align: left !important; 
 
    width: 200px !important; 
 
    border-radius: 5px !important; 
 
    margin-top: 10px !important; 
 
    margin-bottom: 0px !important; 
 
    margin: auto; 
 
} 
 

 
#ois-2 .ois-14-title { 
 
    text-align: center !important; 
 
    font-size: 18px !important; 
 
    font-family: 'Helvetica', Helvetica, sans-serif !important; 
 
    line-height: 21px !important; 
 
    font-weight: 700 !important; 
 
    margin-top: 0px !important; 
 
    margin-bottom: 10px !important; 
 
} 
 
#ois-2 .ois-14-inner { 
 
    border-color: #efefef !important; 
 
    border-width: 1px !important; 
 
    background-color: #e2e2e2 !important; 
 
    border-radius: 4px !important; 
 
    padding-bottom: 10px !important; 
 
    padding-top: 10px !important; 
 
    padding-left: 10px !important; 
 
    padding-right: 10px !important; 
 
} 
 
#ois-2 .ois-14-outer { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
} 
 
#ois-2 .ois-14-form { 
 
    text-align: center !important; 
 
    margin:auto; 
 
} 
 

 
body { 
 
    /*width: 500px;*/ 
 
} 
 

 
fieldset { 
 
    display: inline-block; 
 
    width: 200px; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
}
<body> 
 
    <div class='ois-design'> 
 

 
     <div id='ois-2' class='ois-design' > 
 
      <div class="ois-outer ois-14-outer"> 
 
       <div class="ois-14-inner ois-inner"> 
 
        <div class="ois-14-title"> 
 
         Enter your name &amp; email for access to our class schedule and amazing web special! 
 
        </div> 
 
      
 
        <div class="ois-14-subtitle"></div> 
 
       </div> 
 
      </div> 
 
      
 
     <div class="ois-14-form">  
 
      <form method="post" id="ois-form-2" data-service="aweber" > 
 
       <div class="ois-14-name-input-wrapper"> 
 
        <fieldset id="left"> 
 
         <input type="text" name="name" class="ois-14-name-input ois-name-input ois-form-control" placeholder="Your Name" /> 
 
        </fieldset> 
 

 
        <fieldset id="right"> 
 
         <input type="text" name="email" class="ois-14-email-input ois-email-input ois-form-control" placeholder="Your Email"> 
 
        </fieldset> 
 
       </div> 
 

 
       <div class="ois-14-button-wrapper"> 
 
        <input type="submit" class="ois-btn ois-14-button" /> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</body>

関連する問題