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

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>