フォームタグ内に送信ボタンがあります。このフォーム タグにはいくつかの css プロパティがあります。
- デスクトップでは、固定されています
- モバイルデバイスでは、パーセンテージ幅があります
問題は、フォーム内の送信ボタンに width:auto; があることです。margin:0 auto; フォームタグの中央に配置されます。しかし、webkit (モバイル サファリとサファリ) はそれを理解していません。これらのブラウザでは、送信ボタンは中央ではなく左側にあります。そこで、幅を計算して送信ボタンに設定するjqueryスクリプトを作成しました（幅：自動ではなく）。それが修正でした。
私は調査を行い、display:table-cell; を使用できることがわかりました。コンテンツ（送信ボタン）を中央に配置するフォームタグで、しかし、それはフォーム自体を中央に配置できないことを意味します。私の質問は、以下のコードを変更して、フォームがラッパーの中央に配置され、送信ボタンがフォーム内に配置されるようにする方法です。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap{
width:1000px;
background:red;
}
form {
height:100px;
width:500px;
margin:0 auto;
display:table-cell;
border:1px solid black;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
}
form input[type=submit], form input[type="button"], form input[type="reset"], form button {
width:auto;
min-width:40%;
height:32px;
margin:20px auto;
line-height:14px;
padding:9px 15px;
background-color:#617798;
border:0;
font-size:14px;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
/* Border-Radius */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
cursor:pointer;
display:inline;
/* iPad-Button-Reset:*/
-webkit-appearance:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Titel Blafasel</h1>
<form>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>