I've encountered this issue multiple times and I'm always unsure of the best approach to resolve it.
Here is a screenshot for better context:
This is what it should look like...
.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;
}
}
Please view the fiddle here Updated as per the below:
http://jsfiddle.net/67AD7/
My question now is, how can I achieve a 'better' vertical alignment between the icon and text in this particular scenario? Should I consider using a table or perhaps a list?
Note that I need to be able to insert HTML ('post-count') over the icon as shown in the examples provided.
Your assistance on this matter would be greatly appreciated!