伪元素 文本居中

• 问题：
  使用伪元素 ::before后，影响了其原来的文本位置，使其下沉。

.searchBox {
    width: 100%;
    margin: 8px 10px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border: 1px solid #ccc;
}

.searchBox::before {
    content: "";
    display: inline-block;
    margin: 5px 8px 0 8px;
    width: 15px;
    height: 15px;
    background-size: 104px auto;
    vertical-align: top;
}

• 原因：
  ::before伪元素为行内块元素，并且继承了line-height，所以导致整体被::before伪元素的margin-top向下推了，也就无法居中
• 解决方法:
  1、方法一：给伪元素::before一个浮动，脱离文本流

  .searchBox::before {
      content: "";
      display: inline-block;
      margin: 5px 8px 0 8px;
      width: 15px;
      height: 15px;
      background-size: 104px auto;
      float: left;
  }
  

  2、方法二：给伪元素一个vertical-align: top;

  .searchBox::before {
      content: "";
      display: inline-block;
      margin: 5px 8px 0 8px;
      width: 15px;
      height: 15px;
      background-size: 104px auto;
      vertical-align: top;
  }