Question

这在标题中很难解释，但我将以jsfiddle展示给您

基本上我想向下移动信封图标，但不影响测试。

所以看起来像这样： How it should look

但是由于某种原因，它忽略了CSS中的i标签。

它似乎忽略了什么：

.envelope i {
  margin-top: 10px;
}

希望你们能帮助我！

对于那些想知道为什么要这样做的人……是因为我需要这样做，以使文本居中于图标，例如，如果我有一个非常大的图标，则需要将文本居中于其中。

Answer 1

i忽略边距，因为它是一个内联元素。

您可以这样移动元素：

li i.envelope {
   position: relative;
   top: 10px;
}

Answer 2

将其用作CSS：

li {
    list-style-type: none;
}

a {
    vertical-align: top;
}

.envelope {
    margin-right: 10px;
    margin-top: 8px;
}

vertical-align:top设置<a>标记以按照您想要的方式对齐。您还想在margin-top类上设置.envelope的样式，<i>标记有时会表现出怪异的行为。

链接到更新的JS小提琴： CloudFormation StackSets

希望这会有所帮助！

Answer 3

您需要的只是转换：translateY

li {
  list-style-type: none;
}

.envelope {
  margin-right: 10px;
  animation: upDown 1s infinite ease;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">

<li><i class="fa fa-envelope envelope" aria-hidden="true"></i><a href="">Email:</a></li>

Answer 4

.envelope i {
    margin-top: 10px;
}

兄弟，您对此有疑问。在您提供的示例中，<i>本身包含class='envelope'，而您正在尝试访问.envelope的子级。这就是为什么忽略。您需要这样做：

.envelope {
    position: relative;
    top: -5px; // or whatever value you want to enter
}

CSS，如何在不影响嵌入式文本的情况下向下或向上移动<i>？

4 个答案: