對齊圖標旁邊的文字使用：之前

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;