Question

如何在方法之前垂直对齐插入的图标？

这就是我所拥有的：

<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

您可以使用{{> EasySearch.Input index=articlesIndex}} <ul> {{#EasySearch.Each index=articlesIndex}} <li><a href="/article/{{_id}}">{{title}}</a></li> {{/EasySearch.Each}} </ul>并设置尺寸（宽度，高度），然后您可以使用background。

<强> CSS

vertical-align

<强> DEMO HERE

Answer 2

您可以使用background和absolute position图标在中间完全垂直对齐。

.button a:before {
    content: " ";
    background-image: url(http://i.stack.imgur.com/tKsDb.png);
    position: absolute;
    width: 18px;
    height: 16px;
    top: 50%;
    margin: -8px 0 0 -25px;
}

以下是示例：https://jsfiddle.net/1z83tc1o/3/

如何对齐插入的图标：方法之前？

2 个答案: