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

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

您是否尝试过“纵向对齐” - 它似乎有效。

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

CODEPEN

Answer 2

我不知道你为什么使用：之前你有空的i标签，之前你想要添加内容。为什么不在这个

的i标签（.lock）上添加图标作为背景

＆＃13;

＆＃13;

  .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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果要垂直居中，可以使用行高 例如，如果.lock高度是30px，那么将line-height：设置为跨度为30px;