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

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

将display: inline-block;和position: relative;应用于图像。现在，您可以相对于其默认位置移动它，例如通过添加bottom: -2px

（我在下面的代码段中应用了-6px，使其更加明显）

作为替代方案，您可以对span应用类似的设置，以移动文本而不是图像。

img {
  display: inline-block;
  position: relative;
  bottom: -6px;
}

<div class="text-center">
  <img src="http://placehold.it/40x20" height="32" />
  <span>Professional Grade Technology</span>
</div>

Answer 2

您可以使用不同的div，并使用边距或填充！

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



<!-- CSS FILE --!>
#span2{
  margin-top: 2px;
}

Answer 3

我认为，我建议在徽标内添加一些div标签。

通过在float: left中使用2个div标签，我们使2 div是内联的。

将display: table和display: table-cell组合成垂直居中div的高度。

.float-left {
  float: left;
}

.d-table {
  display: table;
  height: 32px;
}

.d-table-cell {
  display: table-cell;
}

.align-middle {
  vertical-align: middle;
}

<div class="text-center">
  <div class="float-left">
    <div class="d-table">
      <div class="d-table-cell align-middle">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
      </div>
  </div>
  </div>  
  <div class="float-left">
    <div class="d-table">
      <div class="d-table-cell align-middle">
        <span>Professional Grade Technology</span>
      </div>
  </div>  
  </div>
</div>

Answer 4

请考虑以下默认因素：

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