Q&A
出力されたHTMLをご提示ください。
追記２
以下のCSSを外すと、中央揃えになりました。しかし以下CSSは
.form-control-file, .form-control-range {いずれも私が作ってものではなくbootstrapのものと考えられます。
ここのクラスだけをどのようにしたら無効にできるのでしょうか？
追記
出力されたHTMLを以下に記載させて頂きましたのでご確認ください。
<form class="mx-auto text-center" action="" method="POST" enctype='multipart/form-data'> <div class="form-group"> <input type="file" name="upload" class="form-control-file" required> </div> </form>
お世話になります。非常に困っています。
#できないこと 以下画像のように左揃えになってしまい困ってます。
該当箇所をchromeの検証で調べてみました。該当のCSS部分を以下のように修正しましたが左揃えのままでした。
#やりたいこと 表示 「ファイルを選択」選択されていません 両方の表示を中央揃えにしたいです。
#ためしたこと
text-align: center;を追加して試したのですが、「ファイルを選択」ボタンや選択されていません が中央揃えになりませんでした。
CSS
.form-group {
.form-control-file{
両方同じ指定をしてみましたが左揃えのまま変更しませんでした。非常に困っています。
.form-group { font-size: 12px; text-align: center; } .form-control-file{ font-size: 12px; text-align: center; }
HTML
<form action="" method="POST" enctype='multipart/form-data'> {{ form.non_field_errors }} {% for field in form %} <div class="form-group"> <label for="{{ field.id_for_label }}">{{ field.label_tag }}</label> {{ field }} {{ field.errors }} </div> {% endfor %} {% csrf_token %} </form>
追記します
質問欄の一番上に記載しましたのでご確認ください
シークレットウインドウでチェックしてもこちらでは左側揃えのままとなっております。
それはCodePenのことですか？
いえ、ローカル環境です。現存コードで中央揃えになっていると教えて頂きましたのでこちらのCSSを探ってみました。すると以下のCSSがありました。form-control-rangeのwidth100%を外すと中央揃えになりました。
.form-control-file, .form-control-range {
display: block;/
width: 100%;
}
しかし .form-control-range は私が作ったものではなくbootstrapのものです。私のcssは最後に呼ぶよう設定しているのですが、どのようにしたら.form-control-rangeのwidthを無効にできるのでしょうか？
現状を示すために追記２を書きました。引き続きどうぞよろしくお願いいたします。
返信遅くなりました。
form-control-file消すと何か問題があるのでしょうか？
消しましたが左揃えのまま変更されません。
BootstrapはCDNから読み込んでますか？
それともサーバー上のですか？
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
id="theme_link"
href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/materia/bootstrap.min.css"/>
<link rel="stylesheet" href="{% static 'css/hoge.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-padsfaaaaaaaaaaaFyTiUHWhU7k8="crossorigin="anonymous"></script>
<script src="{% static 'css/docs.js' %}"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Optional JavaScript jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-aaaaaaaaadddddddddddddddddddddddaaaa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-aaaaaaaaaaa" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-aaaaaaaaaa" crossorigin="anonymous"></script>
</body>
</html>
bootstrapは上記のように設定しています。codepenで教えて頂いたのでコードに問題がなく私のコードが問題なのがわかっているだけに悔しいです！
すみませんCodePenでBootStrapを設定するのを忘れてました。
確かに左寄せになりますね。
BOOTSTRAPをこの部分だけ無効にできればいいと思うのですが、それができませｎ。
回答3件
0
ベストアンサー
form-groupにdisplay: inline-blockを設定してください。
投稿2019/09/16 02:50
総合スコア10429
すぐ試します
display: inline-block;
できました。ありがとうございます！いやぁかっこいいです♡
0
そもそも論ですが、<input type="file">のデザインはブラウザによってバラバラです。Internet Explorerでは、左側にファイル名の入力枠、右側に参照ボタンのようになります。
レイアウトにこだわりたいのであれば、全部自前描画する形としたほうがいいでしょう。
投稿2019/09/16 02:58
総合スコア145183
そうですね。ありがとうございます
0
情報が少ないので定かではないですが・・・これでどうでしょうか。
<form class="mx-auto text-center" action="" method="POST" enctype='multipart/form-data'> <div class="form-group"> <input type="file" name="upload" class="form-control-file formInner" required> </div> </form>
.form-group { font-size: 12px; /*text-align: center;*/ } .form-control-file{ font-size: 12px; /*text-align: center;*/ } .formInner{ width:inherit; }
テキストのセンタリング→text-center;
ボックスなどのセンタリング→mx-auto;
Bootstrapではセンタリングなどの細かいプロパティも用意されています。
なるべくhtml側にクラスを付与する形の方が良いと思います・・・
投稿2019/09/15 09:22
編集2019/09/15 11:23退会済みユーザー
総合スコア0
ありがとうございます。ためしてみます
<form class="mx-auto text-center" action="" method="POST" enctype='multipart/form-data'>
上記を試してキャッシュをクリアしましたが、左揃えのまま変更がされませんでした。
左揃えのままです。。
cssはtext-alignを外してます
HTMLについて追記をしましたのでご確認頂けば幸いです
現状を示すために追記２を書きました。引き続きどうぞよろしくお願いいたします。
.form-control-fileはhtml側のどこに記述があるのでしょうか。
とりあえず無効にする場合は自作のクラスを付与するが定番だと思います。
<form class="mx-auto text-center formInner" action="" method="POST" enctype='multipart/form-data'>
自分のファイル.css
.formInner{
width:inherit;
}
ありがとうございます。ためします。
上記のコードを記載しましたが左揃えのままかわりませんでした。キャッシュはクリアしています
さらに同じく追記２に記載した通り、以下のCSSを外すと中央揃えになりました。
.form-control-file, .form-control-range
<form class="mx-auto text-center" action="" method="POST" enctype='multipart/form-data'>
<div class="form-group">
<input type="file" name="upload" class="form-control-file formInner" required>
</div>
</form>
.formInner{
width:inherit;
}
で、どうでしょうか。
試しましたが左揃えのままです
あなたの回答
tips
プレビュー
