垂直对齐图标和文本列表

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（'post-count'），如提供的示例所示。

非常感谢任何帮助！

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/