水平方向の中央と垂直方向の中央に要素を配置したい

3番目のitemクラスにあるtable-containerの中に水平方向の中央と垂直方向の中央に要素を配置したいのですが、table要素の中で左端に表が寄ってしまい思うように配置されなくて困っています。flex-boxクラスにtext-align:centerをし、table要素の一つ上の要素であるtable-containerにvertical-align: middleをすることは試しました。

html
1コード
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document2</title>
8  <link rel="stylesheet" href="code-pra.css">
9  
10</head>
11<body>
12  <div class="flex-box">
13    <div class="item">
14    <h5>テキスト<em class="tex-pink">テキスト</em><br>
15      テキスト<em class="tex-pink">テキスト</em>テキスト</h5>
16    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
17    </div>　
18    <div class="item">
19     <h5>テキスト<br>
20       <em class="tex-pink">テキストテキスト</em>テキストテキストテキスト</h5>
21     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
22    </div>
23    <div class="item">
24     <h5><em class="tex-pink">テキスト</em>テキスト<br>
25      テキスト</h5>
26      <div class="table-container"> 
27
28/*対象のコード*/
29        <table >
30         <tr>
31           <td>テキスト</td>
32           <td>テキスト</td>
33         </tr>
34     
35      <tr>
36         <td>テキスト</td>
37         <td>テキスト</td>
38      </tr>
39     
40      <tr>
41        <td>テキスト</td>
42        <td>テキスト</td>
43      </tr> 
44     
45      <tr>
46        <td>テキスト</td>
47        <td>テキスト</td>
48      </tr>
49     
50      </table> 
51      </div>
52
53    </div>
54    <div class="item">
55     <h5>テキスト
56      テキスト<em class="tex-pink">テキスト</em></h5>
57     <p>テキスト<br>
58      テキスト</p>
59    </div>
60  </div>
61 </body>
62</html>
63 
64

css
1コード
2@charset "utf-8";
3.flex-box{display:flex;
4  flex-wrap:wrap; margin: 0 auto; justify-content: center;
5  justify-content:space-around; text-align:center;
6  } 
7  h5{background: #fcebeb; margin:0px; padding:20px 0px; border-bottom: 1px dotted #111;}
8  .item{flex-basis: 40% ; padding:3px 3px ; border: 1px solid #111; margin-bottom:50px;}
9  td{border-right: 1px dotted #111; border-bottom:1px dotted #111;}
10  td:nth-child(even){border-right:none;}
11.item p{height:178px;}
12.tex-pink{color:#ff5089;}
13  
14table-container{ vertical-align: middle;}
15  table{width:82%;   display: inline-block; } 
16

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

回答1件

ベストアンサー

下記でどうですか。

css
1/* 以下追加 */
2.item { 
3  display: flex;
4  flex-direction: column;
5}
6/* 以下修正 */
7.table-container {
8  flex: auto;
9  display: flex;
10  justify-content: center;
11  align-items: center;
12}
13/* 以下削除
14table {
15  width: 82%;
16  display: inline-block;
17}
18*/