对齐图标旁边的文字使用：之前

Question

我试图对齐我的文字旁边我的图标，但无论我做什么，它都不起作用。

我尝试摆弄top或margin但是它似乎仍然不想在图标旁边对齐。有任何想法吗？

CSS：

.lock { 
    display: inline-block; 
    height: 36px; 
    width: 30px; 
    text-align: center; 
} 

.lock:before { 
    content:url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png'); 
    margin: 2px; 
} 

.subMenu-link { 
    list-style:none; 
    margin: -10px 0 10px; 
    padding-left: 30px; 
} 

span { 
    display: inline-block; 
    background-color: pink; 
} 

HTML：

<li class="subMenu"> 
    <a href=""> 
     <i class="lock"></i>     
     <span>User Account</span> 
    </a> 
    <ul class="subMenu-link"> 
     <li>One Link</li> 
     <li>One Link</li> 
     <li>One Link</li> 
     <li>One Link</li> 
    </ul>        
</li> 

结果表明这一点：

Answer 1

我不知道为什么你使用：当你有，你想之前添加内容空我标记之前。为什么，如果你想centerize它垂直您可以使用的line-height 例如，如果只是不添加图标，在我的标签（.lock）背景是这样

.lock { 
 
    background: url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png') no-repeat center; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    } 
 
    .subMenu-link { 
 
    list-style: none; 
 
    margin: 10px 0; 
 
    padding-left: 30px; 
 
    } 
 
    span { 
 
    display: inline-block; 
 
    background-color: pink; 
 
    vertical-align: middle; 
 
    }

<li class="subMenu"> 
 
    <a href=""> 
 
    <i class="lock"></i> 
 
    <span>User Account</span> 
 
    </a> 
 
    <ul class="subMenu-link"> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    </ul> 
 
</li> 
 

 
<li class="subMenu"> 
 
    <a href=""> 
 
    <i class="lock"></i> 
 
    <span>User Account</span> 
 
    </a> 
 
    <ul class="subMenu-link"> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    </ul> 
 
</li> 
 

 
<li class="subMenu"> 
 
    <a href=""> 
 
    <i class="lock"></i> 
 
    <span>User Account</span> 
 
    </a> 
 
    <ul class="subMenu-link"> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    <li>One Link</li> 
 
    </ul> 
 
</li>

Answer 2

你有没有尝试过 “垂直对齐” - 它似乎工作。

.lock:before { 
    content:url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png'); 
    vertical-align: -10%;  
} 

CODEPEN

Answer 3

.lock高度是30px，因此将行高设置为跨度为30px;