垂直居中多行文本和：图像元素之前

Question

我有一个带有文本的元素和 :: before 中的图像作为其图标。 文本可以是1或2行高。我希望图像和文本都垂直居中。我试过

display: table-cell;
vertical-align: middle;
text-align: center;

这里：http://jsfiddle.net/omw8umkq/3/。 但我没有工作。没有:: before元素，文本将居中，但图像会破坏它。 我该怎么办？

Answer 1

您可以在没有伪元素的情况下执行此操作，只需将background-position和padding-left设置为.textcenter

JSFiddle - DEMO

<强> CSS：

.textcenter {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /*background: #cc1;*/
    background-image: url('http://dummyimage.com/30');
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 40px;
}