【CSS】inputフォームを基準に中央寄せにする方法

今回は、「inputフォームを基準に中央寄せにする方法」について紹介します。

【CSS】inputフォームを基準に中央寄せにする方法

HTML

<h2>タイトルテキストです。</h2>

<div class="form">
    <div class="form-item">
        <label for="">名前</label>
        <input type="text">
    </div>
    <div class="form-item">
        <label for="">メールアドレス</label>
        <input type="text">
    </div>
    <div class="form-item">
        <label for="">お問い合わせ</label>
        <input type="text">
    </div>
</div>

CSS

h2 {
    font-size: 30px;
    margin-bottom: 60px;
}
.form {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    &-item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        label {
            width: 120px;
            position: absolute;
            left: -120px;
            text-align: left;
        }
        input {
            width: 100%;
        }
    }
}

ポイントは、formにposition: relative;を指定し、labelをposition: absolute;で位置を調整することです。

inputフォームを基準に中央寄せになるので、レイアウトが綺麗になります。

関連記事:

【CSS】主要な擬似クラスについて iphoneでのinput要素のデフォルトを消すコード CSSを使って自動でナンバリングする方法 画像の下に出来る余白の消し方について【WEB制作初心者向け】