Home>

I want to place elements in the horizontal center and vertical center in the table-container in the third item class, but the table is moved to the left end in the table element and it is not placed as expected. in trouble. I tried text-align: center for flex-box class and vertical-align: middle for table-container which is one element above table element.

code
<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>Document2</title>
<link rel = "stylesheet" href = "code-pra.css">
</head>
<body>
  
    
     Text<em>Text</em><br>
      Text<em>Text</em>Text 
  <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
    
    
      text<br>
     <em>Text Text</em>Text Text Text 
   <p>Text Text Text Text Text Text Text Text Text Text Text Text</p>
    
    
    <em>text</em>text<br>
      Text 
      
/ * Target code * /
      <table>
       <tr>
         <td>text</td>
         <td>text</td>
       </tr>
    <tr>
       <td>text</td>
       <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    </table>
      
    
    
      text
      Text<em>Text</em>
   <p>text<br>
      Text</p>
    
  
</body>
</html>
code
@charset "utf-8";
.flex-box {display: flex;
  flex-wrap: wrap;margin: 0 auto;justify-content: center;
  justify-content: space-around;text-align: center;
  }
  h5 {background: #fcebeb;margin: 0px;padding: 20px 0px;border-bottom: 1px dotted # 111;}
  .item {flex-basis: 40%;padding: 3px 3px;border: 1px solid # 111;margin-bottom: 50px;}
  td {border-right: 1px dotted # 111;border-bottom: 1px dotted # 111;}
  td: nth-child (even) {border-right: none;}
.item p {height: 178px;}
.tex-pink {color: # ff5089;}
table-container {vertical-align: middle;}
  table {width: 82%;display: inline-block;}
  • Answer # 1

    How about below?

    / * Add below * /
    .item {
      display: flex;
      flex-direction: column;
    }
    / * Corrected below * /
    .table-container {
      flex: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    / * Delete below
    table {
      width: 82%;
      display: inline-block;
    }
    * /

    CodePen sample