垂直对齐图标和文本列表

Question

我在很多时候都遇到过这个问题，但从未真正知道解决该问题的最佳方法。

更好的上下文截图：

它应该是什么样的...

.container {
max-width: 360px;
font-size: 16px;
}
.talking-point {
    margin-bottom: 10px;
    display: table;
    background-image: url('http://s28.postimg.org/yozkg6ueh/speech_bubble.png');
    background-repeat: no-repeat;
    background-position: 0 45%;
    min-height: 35px;
    i {
        padding-left: 10px;
        line-height: 27px;
        color: #fff;
    }
    p {
        padding-left: 18px;
    display: table-cell;
        vertical-align: middle;

    }
}

请检查小提琴这里更新如下 ：
http://jsfiddle.net/67AD7/

现在我的问题是，在这种情况下，如何在图标和文本之间实现更好的垂直对齐。 我几乎想使用表格还是应该使用列表？

注意，我需要能够按照提供的示例在图标上插入HTML（“后计数”）。

任何帮助是极大的赞赏！

Answer 1

基本上，您必须将背景分配给i标签 。 您的CSS最终如下所示：

.talking-point {
  margin-bottom: 10px;
  display: table;
  min-height: 35px;
  i {
    background: url('http://s28.postimg.org/yozkg6ueh/speech_bubble.png') no-repeat;
    padding-left: 8px;
    line-height: 30px;
    width: 35px;
    height: 35px;
    display: inline-block;
    color: #fff;
  }
  p {
    display: table-cell;
    vertical-align: middle;

  }
}

http://jsfiddle.net/xNTh9/