垂直對齊圖標和文本列表

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/