フォーム全体のセンタリングに必要なヘルプ。ブラウザのウィンドウが小さくなったり、入力フィールドがそれに応じて調整されたりすると、フォームが中央に収まるようにします。お問い合わせフォーム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>
あなたはおそらく何か間違ったことをやっているimportant'! '使用している場合。また、簡略化されたルールを使用することで、CSSを大幅に簡素化(読みやすく)することができます。 – Dai
その他のヒント:入力ラベルに 'placeholder =" "'属性を使用しないでください。値があるときにテキストが消えるからです。また、テキストアンパサンドを正確にエンコードする必要があります( '& 'へ)。マークアップが正しく意図されていないため、読みやすくなりません。 – Dai