css - 将 Font Awesome 图标垂直居中并对齐到表格的左侧

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 中。)

.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;
}

<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>