将“字体真棒”图标垂直居中放置在表格左侧

Question

I am trying to position a font-awesome icon to the left of a table element, such that it is vertically centred against the table.

This is what I have at the moment:

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

And it's giving me this result:

Answer 1

Add display: inline-block and vertical-align: middle to both the icon and table, like so:

(For the purposes of the demo I unnested your Sass into normal 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>