Question

我正在尝试垂直对齐psuedo（之前）元素中的图像和旁边的一些文本。我试过添加

vertical-align: middle;

对于图像和图像文本。有谁知道这样做的方法？负垂直边距也不会影响伪元素。

的CSS：

.email {
    &:before {content: url('../images/envelope.png');}
}
.phone-number {
    &:before {content: url('../images/phone.png');}
}
.about-me {
    &:before {content: url('../images/avatar.png');}
}

标记：

    <ul>
        <li><h3>Jon Doe</h3></li>
        <li><a href=""><p class="icon phone-number">250-555-5555 ext. 2</p></a></li>
        <li><a href=""><p class="icon email">email@email.com</p></a></li>
        <li><a href=""><p class="icon about-me">About Me</p></a></li>
    </ul>

Answer 1

使用您当前的标记，您绝对不能使用vertical-align。我使用文本周围的div修改了下面显示的标记。根据图标图像的大小，您可以使用填充垂直对齐每个图标图像旁边的文本 - 假设所有图标的高度相同。

或者，您可以使用像FontAwesome这样的图标集 - http://fortawesome.github.io/Font-Awesome/icons/ - 并且所有图标都将比图像更快地加载到页面上，并且所有图标都将保证是相同的高度。这样，当您在文本的顶部和底部设置填充时，您可以确保它在每个图标的中间垂直平整。

＆＃13;

p.email:before {
  content: url('../images/envelope.png');
}
p.phone-number:before {
  content: url('../images/phone.png');
  float: left;
}
p.about-me:before {
  content: url('../images/avatar.png');
}
div.text {
  float: left;
  padding: 0 5px;
}
li {
  clear: both;
}

＆＃13;

<ul>
  <li>
    <h3>Jon Doe</h3>
  </li>
  <li>
    <a href="">
      <p class="icon phone-number">
        <div class="text">250-555-5555 ext. 2</div>
      </p>
    </a>
  </li>
  <li>
    <a href="">
      <p class="icon email">
        <div class="text">email@email.com</div>
      </p>
    </a>
  </li>
  <li>
    <a href="">
      <p class="icon about-me">
        <div class="text">About Me</div>
      </p>
    </a>
  </li>
</ul>

＆＃13;

Answer 2

你是说这个意思吗？我本可以读错了......

HTML

<ul>
            <li><h3>Jon Doe</h3></li>
            <li><a href=""><p class="icon phone-number">250-555-5555 ext. 2</p></a></li>
            <li><a href=""><p class="icon email">email@email.com</p></a></li>
            <li><a href=""><p class="icon about-me">About Me</p></a></li>
        </ul>

CSS

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-width: 500px;
  margin: 0 auto;
  display: block;
}

li {
  padding-left: 20px;
  position: relative;
}

li:before {
      display: inline-block;
      position: absolute;
      content: '';
      width: 20px;
      height: 20px;
      left: -5px;
      background-color: black;
}

.email {
    &:before {
      background-image: url('https://secure-a.vimeocdn.com/images_v6/portraits/portrait_50_blue.png');
    }
}
.phone-number {
    &:before {
      background-image: url('https://www.placehold.it/20x20/241');
    }
}
.about-me {
    &:before {
      background-image: url('https://www.placehold.it/20x20/331');
    }
}

当图像作为内容插入伪元素时，是否可以将图像与文本垂直对齐？

2 个答案: