iPhoneでInput Submit ボタン(START)の文字が右にずれる

PCのブラウザで表紙した時にはInput Submitボタンの文字（START）が真ん中に表示されるが、
iPhoneで見ると、右にずれる。STARTの文字が真ん中に表示されるようにしたい。

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        .App {
            text-align: center;
        }

        .landing-section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            min-height: 500px;
            height: 500px;
        }

        .landing-section form input {
            height: 60px;
            font-size: 30px;
            border-radius: 10px;
        }

        .landing-section form input.submit-button {
            color: white;
            height: 120px;
            width: 120px;
            border-radius: 100%;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-appearance: none;
            appearance: none;
            -webkit-appearance: none;
            -webkit-text-size-adjust: none;
            border: solid 1px pink;
            box-shadow: 3px 3px pink;
            transition: 0.2s;
            background-color: fuchsia;
            text-align: center;
            vertical-align: middle;
        }

        .landing-section form input.submit-button:hover {
            background-color: orange;
        }

        .landing-section form input.submit-button:active {
            transform: translateY(2px);
        }
    </style>
</head>

<body>
    <div class="App">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="landing-section">
                <div class="Typist ">
                    <h1>TEST</h1>
                </div>
                <form>
                    <div>
                        <input name="Name" kl_vkbd_parsed="true">
                    </div>
                    <div>
                        <input class="submit-button" type="submit" value="START" kl_vkbd_parsed="true">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

iPhoneでSTARTの表示を真ん中に表示させる方法を知りたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.landing-section form input.submit-button{
2  padding:0;
3}

これで中心にならないですか？

投稿2020/09/27 00:03

geta

総合スコア241

nahi123

2020/09/27 00:15

ありがとうございます。なりました。文字位置がずれたりしないように、padding:0にするのは、一般的だと思っていたの方が良いのでしょうか？

geta

2020/09/27 00:16

この場合は必須でしょうね。リセットCSSなどを使ってデバイス共通化などをやると気にしなくて良くなりますよ。 https://magazine.krowl.jp/3441/

nahi123

2020/09/27 01:55

ありがとうございます

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

iPhoneでInput Submit ボタン(START)の文字が右にずれる

関連した質問