labelタグ内のテキストを中央よせ（bootstrap使用）

下記コードのlabel内のテキストを中央よせするにはどうすれば良いのでしょうか。
できればbootstrapでしたいです。

お分かりになる方お願いいたします。

html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
2        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
3
4        <section id="search">
5            <form class="" id="" action="/projects" accept-charset="UTF-8" method="get">
6                <div class="container-fluid">
7                    <div class="row search-content">
8                        
9                        <div class="col-3">
10                            <div class="form-group row">
11                                <label
12                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1">作成日</label>
13                                <select name="sort" id="sort"
14                                    class="border border-2 border-secondary rounded-0 form-control form-control-sm col-7 font-1">
15                                    <option value="">指定なし</option>
16                                    <option value="created_at ASC" data-name="sort1">作成日 (昇順)</option>
17                                    <option value="created_at DESC" data-name="sort3">作成日 (降順)</option>
18                                </select>
19                            </div>
20                        </div>
21                        <div class="col-2">
22                            <div class="form-group row">
23                                <label
24                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0 align-middle">作業種別</label>
25                                <select
26                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
27                                    name="">
28                                    <option value="">全て</option>
29                                    <option value="0">時間</option>
30                                </select>
31                            </div>
32                        </div>
33                        <div class="col-2">
34                            <div class="form-group row">
35                                <label
36                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0 align-middle">期限</label>
37                                <select
38                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
39                                    name="">
40                                    <option value="">全て</option>
41                                </select>
42                            </div>
43                        </div>
44                        <div class="col-2">
45                            <div class="form-group row">
46                                <label
47                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0">Status</label>
48                                <select
49                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
50                                    name="" id="">
51                                    <option value="">全て</option>
52                                    <option value="0">準備中</option>
53                                    <option value="1">作業中</option>
54                                    <option value="2">納品済</option>
55                                    <option value="3">保留中</option>
56                                </select>
57                            </div>
58                        </div>
59                        <div class="col-2">
60                            <div class="form-group row">
61                                <label
62                                    class="badge badge-secondary border border-secondary rounded-0 col-form-label col-5 font-1 color-1 rounded-0">納品日</label>
63                                <select
64                                    class="form-control form-control-sm col-7 font-1 border border-2 border-secondary rounded-0"
65                                    name="">
66                                    <option value="">全て</option>
67                                </select>
68                            </div>
69                        </div>
70                        <div class="show-button-submit col-1" style="display: flex;">
71                            <button type="submit"
72                                class="btn btn-secondary font-1 border border-2 border-secondary rounded-0"
73                                style="height: 34px">検索</button>
74                        </div>
75                    </div>
76                    <div class="row search-content">
77                        <div class="col-2">
78                            <div class="form-group row">
79                                <label
80                                    class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label font-1 color-1 col-6">発注元</label>
81                                <select
82                                    class="form-control form-control-sm font-1 col-6 border border-2 border-secondary rounded-0 "
83                                    name="">
84                                    <option value="">全て</option>
85                                </select>
86                            </div>
87                        </div>
88                        <div class="col-2">
89                            <div class="form-group row">
90                                <label
91                                    class="badge badge-secondary border border-secondary rounded-0 col-form-label col-2 font-1 color-1 col-6">仕入先</label>
92                                <select
93                                    class="form-control form-control-sm font-1 col-6 border border-2 border-secondary rounded-0 "
94                                    name="">
95                                    <option value="">全て</option>
96                                </select>
97                            </div>
98                        </div>
99                        <div class="col-2">
100                            <div class="form-group row">
101                                <label
102                                    class="badge badge-secondary border border-secondary rounded-0 col-form-label font-1 color-1 col-6">作業担当者</label>
103                                <select
104                                    class="form-control form-control-sm font-1 col-6 border border-2 border-secondary rounded-0 "
105                                    name="">
106                                    <option value="">全て</option>
107                                </select>
108                            </div>
109                        </div>
110                        <div class="col-4">
111                            <div class="form-group">
112                                <input class="form-control form-control-sm" placeholder="Search" type="text"
113                                    name="q[name_or_creator_name_or_company_name_cont]"
114                                    id="q_name_or_creator_name_or_company_name_cont">
115                            </div>
116                        </div>
117                        <div class="col-2 row">
118                            <label class="font-1 result-number justify-content-center">表示件数：</label>
119                            <select class="form-control form-control-sm col-4 font-1" name="">
120                                <option value="">10</option>
121                                <option value="0">20</option>
122                                <option value="1">30</option>
123                            </select>
124                        </div>
125                    </div>
126                </div>
127            </form>
128        </section>
129

Lhankor_Mhy

2021/04/19 01:54

ご提示のコードを試してみましたが、中央寄せになっていました。つまり、問題が再現しませんでした。問題が再現するコードをご提示ください。

sanayaaan

2021/04/19 05:20

私の画面上ですと、文字が上に寄ってしまっておりまして、、。何か他に問題があるということですね。

Lhankor_Mhy

2021/04/19 06:00

ご提示いただいたコードを試してみたサンプルです。 https://jsfiddle.net/Lhankor_Mhy/p47s18rm/ 当方では「作成日」という文字が中央に寄っているように見えます。上記サンプルが、sanayaaanさんの環境でも同様に中央寄せに見えるのであれば、他に問題がある可能性が高そうです。

sanayaaan

2021/04/19 07:12

コードを追加させて頂きました。もう一度こちらのコードでみていただけますでしょうか。お手数をおかけします。ご協力に感謝いたします。

Lhankor_Mhy

2021/04/19 07:25

「上に寄って」ということは、もしかして中央寄せとは垂直中央寄せですか？

sanayaaan

2021/04/19 07:48

そうです。垂直中央寄せとお伝えしておらず失礼いたしました。

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

回答1件

ベストアンサー

align-items-centerでいいと思います。

アイテムの整列 | Flex - Bootstrap 4.2 - 日本語リファレンス

html
1<label class="badge badge-secondary border border-2 border-secondary rounded-0 col-form-label col-5 font-1 color-1 d-flex align-items-center">作成日</label>

投稿2021/04/19 07:59

Lhankor_Mhy

総合スコア36960

sanayaaan

2021/04/19 08:09

ありがとうございます。 align-items-centerを記載すると、若干左寄せに & labelの高さがinput要素と揃わなくなってしまったのですが、対処方法はございますでしょうか？

Lhankor_Mhy

2021/04/19 08:33

水平中央寄せも必要なのですね。それでしたら、回答で示したリンクのちょっと上にあります。 --- 「labelの高さがinput要素と揃わなくなってしまった」とのことですが、当方で試したところ再現しませんでした。 https://jsfiddle.net/Lhankor_Mhy/p47s18rm/2/

sanayaaan

2021/04/19 09:37

貼っていただいたリンクのコードをつかわさせて頂いたところ、うまくいきました。ありがとうございました。

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