ホームへ

【CSS】inputテキストボックスの位置を中央寄せ,右寄せ,左寄せする方法

2022年05月08日

「テキストボックスを中央寄せしたいけど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>

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

【テキストを中央寄せ】自身に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テキストボックスを中央寄せ,右寄せ,左寄せする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ