将字体真棒图标垂直居中并对齐表

Question

我试图在表格元素的左侧放置一个字体很棒的图标，使其垂直居中于桌面。

这就是我现在所拥有的：

HTML

<div class="dates">
    <i class="fa fa-calendar fa-4x" aria-hidden="true"></i>
    <table>
         <tbody>
             <tr>
                 <td>24th Jul 2018</td>
                 <td>7PM</td>
             </tr>
             <tr>
                <td>25th Jul 2018</td>
                <td>7PM</td>
             </tr>
             <tr>
                 <td>26th Jul 2018</td>
                 <td>7PM</td>
             </tr>
             <tr>
                 <td>27th Jul 2018</td>
                 <td>1PM / 7PM</td>
             </tr>
        </tbody>
   </table>
</div>

CSS

.dates {
    border: 3px solid black;
    display: inline-block;
    padding: 8px 0;
    border-radius: 10px;
    background-color: white;
    border-color: grey;

    .fa {
        vertical-align: middle;
    }

    table {
         display: inline-block;

         td {
              font-weight: bold;
              margin: 0;
              padding: 0 10px;
         }
    }
}

它给了我这个结果：

Answer 1

将display: inline-block和vertical-align: middle添加到图标和表格中，如下所示：

（为了演示的目的，我将你的Sass用于普通的CSS。）

＆＃13;

＆＃13;

.dates {
  border: 3px solid black;
  display: inline-block;
  padding: 8px 0;
  border-radius: 10px;
  background-color: white;
  border-color: grey;
}

.fa {
  display: inline-block;
  vertical-align: middle;
}

table {
  display: inline-block;
  vertical-align: middle;
}

td {
  font-weight: bold;
  margin: 0;
  padding: 0 10px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="dates">
  <i class="fa fa-calendar fa-4x" aria-hidden="true"></i>
  <table>
    <tbody>
      <tr>
        <td>24th Jul 2018</td>
        <td>7PM</td>
      </tr>
      <tr>
        <td>25th Jul 2018</td>
        <td>7PM</td>
      </tr>
      <tr>
        <td>26th Jul 2018</td>
        <td>7PM</td>
      </tr>
      <tr>
        <td>27th Jul 2018</td>
        <td>1PM / 7PM</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;