html - 如何将文本跨度相对于图像向下移动几个像素？

Question

我有以下 html:

<div class="text-center">
  <img src="~/images/prof_grade_tech.svg" height="32" />
  <span>Professional Grade Technology</span>
</div>

它看起来像这样:



我想移动文字 span降低 2 个像素以更好地将其与图像对齐。我试过添加边距、填充、不可见边框，但似乎没有任何帮助。我已添加 vertical-align:bottom到图像和那种工作，但它把图像移得太远了。

那么如何将文本向下移动 2 个像素呢？

Answer 1

考虑这些默认因素:

<span>是内联级别元素，顶部/底部填充/边距将不适用。

vertical-align 设置为 baseline - 对齐元素的基线。

要垂直居中对齐它们:

选项 1:

img, span {
  display: inline-block;
  vertical-align: middle;
}

span {
  margin-bottom: -2px;
}

<div class="text-center">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
  <span>Professional Grade Technology</span>
</div>

选项 2:

img, span {
  display: inline-block;
  vertical-align: middle;
}

span {
  position: relative;
  bottom: -2px;
}

<div class="text-center">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
  <span>Professional Grade Technology</span>
</div>

选项 3:

img, span {
  display: inline-block;
  vertical-align: middle;
}

span {
  transform: translateY(2px);
}

<div class="text-center">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
  <span>Professional Grade Technology</span>
</div>

选项 4:

div {
  display: flex;
  align-items: center;
}

span {
  margin-left: 4px;
  margin-bottom: -2px;
}

<div class="text-center">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
  <span>Professional Grade Technology</span>
</div>