bootstrapのカラム表示を使い画像の横のテキストを垂直方向中央にしたいです。

前提・実現したいこと

カバー画像の上にカラムをしようし、画像と文字を横並びにしました。
文字がカラムの垂直中央にきません。アドバイスのほど、よろしくお願いいたします。

該当のソースコード

HTML
1        <div id="cover" class="container-fluid">
2            <div class="row">
3                <div class="col-12 col-sm-12 col-md-12 col-lg-12">
4                    <div class="row">
5                        <div class="col-12 col-md-6 col-lg-6">
6                            <img class ="logo img-fluid "src="img/logo-green.PNG" alt="logo-image">
7                        </div>
8                        <div class="text col-12 col-md-6 col-lg-6">
9                            <h1>ORISSA</h1>
10                            <p>"アナタ"だけの空間で<br>お家でも扱いやすいスタイルに。</p>
11                        </div>
12                    </div>
13                </div>
14            </div>
15        </div>

css
1#cover{
2    height: 100vh;
3    background-image: url("../img/mirror.JPG");
4    background-size: cover;
5    background-repeat: no-repeat;
6    background-position: center center;
7    position:relative;
8    color: #e6d6b4;
9    background-attachment: fixed;
10    z-index: -2;
11}
12
13#cover:before{
14    content: '';
15    background: inherit;
16    -webkit-filter: blur(5px);
17    -moz-filter: blur(5px);
18    -o-filter: blur(5px);
19    -ms-filter: blur(5px);
20    filter: blur(5px);
21    position: absolute;
22    top: -5px;
23    left: -5px;
24    right: -5px;
25    bottom: -5px;
26    z-index: -1;
27  }
28
29   #cover h1{
30    font-size: 72px;
31    font-family: 'Philosopher', sans-serif;
32    filter: drop-shadow(5px 5px 5px #aaa);
33    top: 64%;
34    z-index: 1;
35    text-align: center;
36}
37
38
39#cover p{
40    top: 72%;
41    font-family: 'Noto Serif JP', serif;
42    font-size: 24px;
43    z-index: 1;
44    text-align: center;
45    filter: drop-shadow(5px 5px 5px #aaa);
46}
47
48#cover img{
49    z-index: 1;
50    opacity: 1;
51    padding: 0%;
52    margin: 0%;
53}
54
55#cover img:before{
56    position: absolute;
57    z-index: 1;
58    filter: drop-shadow(5px 5px 5px #aaa);
59    opacity: 1;
60}
61
62.text{
63    align-items: center;
64}

試したこと

align-items: center;をテキストを囲む親要素に指定しましたが、出来ずです。

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

align-items-centerを画像のブロックとテキストのブロックの親要素に設定すればいいでしょう。

css
1<div id="cover" class="container-fluid">
2  <div class="row">
3    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
4      <div class="row align-items-center">
5        <div class="col-12 col-md-6 col-lg-6">
6          <img class ="logo img-fluid"  src="https://placehold.jp/200x200.png" alt="logo-image">
7        </div>
8        <div class="text col-12 col-md-6 col-lg-6">
9          <h1>ORISSA</h1>
10          <p>"アナタ"だけの空間で<br>お家でも扱いやすいスタイルに。</p>
11        </div>
12      </div>
13    </div>
14  </div>
15</div>