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

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> 标签设置为按照您要查找的方式对齐。您还想在 .envelope class 上设置 margin-top 的样式，有时 <i> 标签的行为方式很奇怪。

Link 更新 JS Fiddle： https://jsfiddle.net/myv50428/8/

希望对您有所帮助！

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

CSS, How to move <i> downwards or upwards without affecting inline text?

html

css

font-awesome

font-awesome-5