中心div在td和内部中心在这个div中

Question

现在我有这样的结构：

https://plnkr.co/edit/62qnaaK0udONld8l0tAv?p=preview

    <table>
      <tr>
        <td width="10%">
          <span>text</span>

            <div class="hint">
              <span class="icon"></span>
              <span class="recomendation">Some text with recomendation</span>
            </div>
        </td>
        <td>someData</td>
      </tr>
    </table>

看起来像：

http://image.prntscr.com/image/4f3e31511a5740958e5ec401855da5ed.png http://image.prntscr.com/image/4f3e31511a5740958e5ec401855da5ed.png

是否可以这样做，如下所示：

http://image.prntscr.com/image/0a941f1b2ea14823ac1d8a9f6bf866a8.png http://image.prntscr.com/image/0a941f1b2ea14823ac1d8a9f6bf866a8.png

Answer 1

要使黄色框显示在上一个链接中，请更改.hint的CSS，如下所示：

.hint {
background: yellow;
margin-left: auto;
margin-right: auto;
}