html - 如何对齐插入:before method?的图标

Question

如何垂直对齐使用 :before 方法插入的图标？

这是我的:

<div class="button submit">
  <a class="submit check_car_search" href="#" >Some Text</a>
</div>

CSS:

.button a{
    background: none;
    background-color: #32BBE7;
    text-indent:1px;
    color:#FFF;
    text-decoration: none;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 50px;
    font-style: italic;
}

.button a:hover{
    background-color: #2597F0;
}


.button a:before {
    content:url(http://i.stack.imgur.com/tKsDb.png);
    position: relative
}

JSFiddle:https://jsfiddle.net/1z83tc1o/

如何相对于文本垂直对齐图标？

Answer 1

可以使用background，设置大小(宽，高)，然后可以使用vertical-align。

CSS

.button a:before {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 16px;
    vertical-align: middle;
    content:"";
    background: transparent url(http://i.stack.imgur.com/tKsDb.png) no-repeat center center;
    margin-right: 20px; // Optional

}

DEMO HERE