BOX２つを並べて、その片方をテキストにして、テキスト全体を中央、テキスト自体は左寄せにしたい。

BOX２つを並べて、その片方をテキストにして、テキスト全体を中央、テキスト自体は左寄せにしたいです。

左側をgoogle map
右側をテキスト（テキストは複数行)

テキストの縦方向による操作で、vertical-alignが機能しないです。
どのようにしたら良いでしょうか。

よろしくお願いいたします。

HTML
1<section class="access">
2            <h2 class="heading">ACCESS</h2><div class="access-wrapper">
3            <div class="access-info">
4                <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d420062.0198342604!2d135.4193668!3d34.6614067!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1529944423393" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
5            </div>
6            <div class="access-info">
7                <dl>
8                    <dt>住　　所</dt><dd>　　　〇〇〇〇</dd>
9                    <dt>お問合せ</dt><dd>　　　〇〇〇〇<dd>
10                    <dt>メ ー ル</dt><dd>　　　〇〇〇〇</dd>
11                    </dl>
12            </div>
13        </div>
14    </section>

CSS
1.access {
2    padding: 50px 0;
3    background-color: #fff;
4    color: #333;
5}
6.access-wrapper{
7    display: table;
8    width: 100%;
9    margin: 50px auto 0;
10    table-layout: fixed;
11}
12.access-info{
13    display: table-cell;
14    padding: 50px;
15}
16.access-info dl{
17    overflow: hidden;
18    vertical-align: top;
19    margin: 0;
20    padding: 0;
21}
22.access-info dt{
23    float: left;
24    font-weight: bold;
25}
26.access-info dd{
27    margin:0 0 3em 0;
28    text-align: left
29}
30

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

回答2件

flexとか。

CSS
1iframe { /* ADD */
2    width: 100%;
3}
4.access {
5    padding: 50px 0;
6    background-color: #fff;
7    color: #333;
8}
9.access-wrapper{
10    /*display: table;*/
11    display: flex; /* ADD */
12    width: 100%;
13    margin: 50px auto 0;
14    /*table-layout: fixed;*/
15}
16.access-info{
17    /*display: table-cell;*/
18    padding: 50px;
19    /* ↓ ADD ↓ */
20    box-sizing: border-box;
21    width: 50%;
22    display: flex;
23    align-items: center;
24}
25.access-info dl{
26    overflow: hidden;
27    vertical-align: top;
28    margin: 0;
29    padding: 0;
30}
31.access-info dt{
32    float: left;
33    font-weight: bold;
34}
35.access-info dd{
36    margin:0 0 3em 0;
37    text-align: left
38}
39```**動くサンプル：**[https://jsfiddle.net/jghp8nvm/](https://jsfiddle.net/jghp8nvm/)
40
41---
42
43【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
44[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/)
45
46【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
47[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)
48
49【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
50[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)