【CSS/html】inputを右寄せ,中央寄せ,左寄せする方法

「テキストボックスを中央寄せしたいけどmargin:autoじゃ中央寄せにならないの？」

inputテキストボックスの位置、またはそのテキストを右寄せ,中央寄せ,左寄せする方法を解説します。

【ボックス自体を中央寄せ】親にtext-align

<input type="text">つまりテキストボックスはinline-block要素です。

inline-block要素を位置調整するにはインライン要素と同様で、親要素にtext-alignを指定します。

text-alignは子要素かつインライン(またはinline-block)要素の位置を調整するCSSです。

値はcenterが中央寄せ、rightが右寄せ、leftが左寄せです。

text-alignについて詳しくはこちら↓

【中央寄せ】親にtext-align:center

<style>
.example{
    text-align: center;
}
</style>
<div class="example">
    <input type="text" value="テキストボックス">
</div>

【右寄せ】親にtext-align:right

<style>
.example2{
    text-align: right;
}
</style>
<div class="example2">
    <input type="text" value="テキストボックス">
</div>

【左寄せ】親にtext-align:left

<style>
.example3{
    text-align: left;
}
</style>
<div class="example3">
    <input type="text" value="テキストボックス">
</div>

何もしないと左寄せになるため通常は指定不要です。

【テキストを中央寄せ】自身にtext-align

テキストボックスにおけるテキストはinputにとって子要素の扱いになります。

よってinput自身にtext-alignで位置調整できます。

【中央寄せ】自身にtext-align:center

<style>
.example4{
    text-align: center;
}
</style>
<input type="text" value="テキストボックス" class="example4">

【右寄せ】自身にtext-align:right

<style>
.example5{
    text-align: right;
}
</style>
<input type="text" value="テキストボックス" class="example5">

【左寄せ】自身にtext-align:left

<style>
.example6{
    text-align: left;
}
</style>
<input type="text" value="テキストボックス" class="example6">

何もしないと左寄せになるため通常は指定不要です。

【まとめ】テキストボックスを中央寄せする方法

• ボックス自体の位置調整→親にtext-align
• テキストの位置調整→自身にtext-align

ボックスの中央寄せもテキストの中央寄せもtext-align:centerを使いますが、親に指定するか自身に指定するかの違いがあるため注意しましょう。

• 【中央寄せ】text-align:center
• 【右寄せ】text-align:right
• 【左寄せ】text-align:left

以上、inputテキストボックスを中央寄せ,右寄せ,左寄せする方法でした。