[twitter-bootstrap4]labelタグのtextaligncenterが効きません

前提・実現したいこと

twitter-bootstrap4を使いウェブサイト作成してます

発生している問題・エラーメッセージ

フォーム部品のラベルのチェックボックスにだけ中央寄席が効かず困っています

エラーメッセージ

該当のソースコード

<div class="custom-control custom-checkbox text-center">
  <input type="checkbox" class="custom-control-input" id="areyouhuman">
  <label class="custom-control-label" for="areyouhuman">あなたは猫ですか?</label>
</div>

bootstrapのサイトでダウンロードしたファイルをインポートしてる以外にスタイルシートは書いてません

試したこと

スタイルシートを書かずに実装したいのですがどんなクラスも効かず、困っています

補足情報（FW/ツールのバージョンなど）

bootstrap4.0

退会済みユーザー

2018/12/30 01:16

ブラウザの開発ツールで有効状態を確認してください。

quoque

2018/12/30 01:45

申し訳ございません。初めてBootstrapを使うのですが、有効状態はどのように確認すればよろしいでしょうか?

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

回答1件

ベストアンサー

問題が再現したので、回答します。.custom-control-label::beforeが、この擬似要素に設定されているposition: absolute;によって、初期包含ブロック (ブラウザで表示される領域) に対して相対配置されていることが原因だと思います。そのため、.custom-control-label::beforeの親要素である.custom-control-labelにposition: relative;を設定し、leftプロパティに負の値をかける必要があります。つまり、この問題が発生するバージョンでは、追加で CSS を記述しなくてはなりません。

しかし、最新バージョン (正確にはv4.1.1以降) の Bootstrap では、既に上記の処理が行われているため、現在使用している古い Bootstrap の代わりに、最新バージョンの Bootstrap を使うことで、 CSS を記述することなく質問者さんの実現したいことが行えると思います(動作確認用リンク)。

投稿2018/12/30 02:01