Bootstrap Floating labels:　中央表示ができない

Djangoのﾌﾛﾝﾄｴﾝﾄﾞを作成しています。
ﾌﾚｰﾑﾜｰｸはBootstrapを使っていますが、Floating labelsのExmpleを使ったところ、
usernameとPasswordのinputタグの部分が画面中央ではなく、画面左上側に寄っています。
中央表示したく、調べてみたもののどれもうまくいきませんでした。
対応策がわかる方がお見えでしたらご教授ください。
よろしくお願いいたします。

html,css
1
2{% extends 'base.html' %}
3
4{% block content %}
5
6<body class="text-center">
7    {{ context }}
8    <form method="POST">{% csrf_token %}<form>
9        <h1 class="h3 mb-3 fw-normal">Please login</h1>
10        <div class="form-floating" style="width:30%">
11            <input type="text" class="form-control" id="floatingInput" placeholder="Username" name='username'>
12            <label for="floatingInput">username</label>
13        </div>
14        <div class="form-floating" style="width:30%">
15            <input type="password" class="form-control" id="floatingPassword" placeholder="Password" name='password'>
16            <label for="floatingPassword">Password</label>
17        </div>
18        <button class="btn btn-lg btn-success" type="submit" style="width:30%">login</button>
19        <p class="mt-5 mb-3 text-muted">&copy; 2017-2021</p>
20    </form>
21</body>
22
23{% endblock content %}

修正1

html
1{% extends 'base.html' %}
2
3{% block content %}
4
5{% block customcss %}
6<link href="{% static 'style_log.css' %}" rel="stylesheet">
7{% endblock customcss %}
8
9<body class="text-center">
10    {{ context }}
11    <form method="POST">{% csrf_token %}<form>
12        <h1 class="h3 mb-3 fw-normal">Please login</h1>
13        <div class="form-floating" style="width:30%">
14            <input type="text" class="form-control" id="floatingInput" placeholder="Username" name='username'>
15            <label for="floatingInput">username</label>
16        </div>
17        <div class="form-floating" style="width:30%">
18            <input type="password" class="form-control" id="floatingPassword" placeholder="Password" name='password'>
19            <label for="floatingPassword">Password</label>
20        </div>
21        <button class="btn btn-lg btn-success" type="submit" style="width:30%">login</button>
22        <p class="mt-5 mb-3 text-muted">&copy; 2017-2021</p>
23    </form>
24</body>
25
26{% endblock content %}

css
1style_log.css
2
3.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
4    width: 118%;
5    text-align: center;
6}
7コード

html
1base.html
2
3<!doctype html>
4<html lang="en">
5    <head>
6        <!-- Required meta tags -->
7        <meta charset="utf-8">
8        <meta name="viewport" content="width=device-width, initial-scale=1">
9
10        <!-- Bootstrap CSS -->
11        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
12        
13        {% block customcss %}
14        
15        {% endblock customcss %}
16
17        <title>base.html</title>
18    </head>
19    
20    <body>
21
22        {% block header %}
23        {% endblock header %}
24
25        {% block content %}
26        {% endblock content %}
27
28    </body>
29</html>

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

回答1件

ベストアンサー

デモページで試してみたところ、以下のCSSでそれっぽい感じになりました。

css
1.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
2	width: 118%;
3	text-align: center;
4}

投稿2021/09/07 09:56

Lhankor_Mhy

総合スコア36960

art35

2021/09/09 00:22

回答ありがとうございます。 CSS初学者のため、ご教授いただければ幸いなのですが、上記をどのようにコーディングすればよろしいでしょうか。

Lhankor_Mhy

2021/09/09 00:41 編集

CSSファイルの最後に追加すればいいと思います。

art35

2021/09/09 07:31

style_log.cssはなかったので作りました。いろいろ試してみましたがうまく反映されません。どこを修正するべきでしょうか。関係するファイルも添付します。

Lhankor_Mhy

2021/09/10 06:03

style_log.css はスタティックディレクトリの中にあるんですよね？ CSSやHTMLには問題がないように思えますので、Djangoが関係しているかもしれないですね。 style_log.css が読み込めているかどうか、開発者ツールで確認してみるのもいいかもしれません。

Lhankor_Mhy

2021/09/10 06:09

もしかして、中央表示をしたいのは、ラベルではなくてinputの方だったりします？

art35

2021/09/13 00:07

そのようでした。inputタグの部分です。本文訂正いたします。画像を添付しました。

art35

2021/09/13 00:31

; margin: auto; を <div class="form-floating" style="width:30%; margin: auto;" >にしたところセンター表示できるようになりました。とても参考になりました。ありがとうございました。参考url張っておきます。 https://style.potepan.com/articles/22829.html#HTML5

Lhankor_Mhy

2021/09/13 00:32

ご解決されて何よりです。

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