react-bootstrapのForm.Control要素を中央に配置する

概要

画面の要素を横で中央寄せで配置するのに、CSSでtext-align:centerの設定をすることがあるかと思います。しかし、この設定が効かないケースがあってtext-align:centerが効かない！text-alignは何に効くCSSかの通り、ブロック要素ではうまく効きません。
react-bootstrapのForm.Controlも、中身はこのブロック要素となってると思われ、text-align:centerの設定が効きませんでした。上記の記事によると、ブロック要素の一番上の親要素にtext-align:centerを設定すれば大丈夫だそうですが、Form.Controlの中の要素に無理矢理設定するわけにもいかず、別の方法で設定することが必要でした。
ということで、今回は私がとった対応を紹介したいと思います。

対応

bootstrap使用が前提ですが、Center align component (both vertical and horizontal) in Reactの記事に、方法が何個か書いてあります。
横で中央寄せにするだけであれば、まずはrowを設定したdivの配下に、もう一個divを設定してmargin: 0 auto;を設定すれば良さそうです。

実装サンプル

sample.js

<div className="row">
  <div style={{ margin: "0 auto" }}>
    <Form.Control
      id="userID"
      type="text"
      name="userID"
      placeholder="ユーザID"
    />
  </div>
</div>