Как сдвинуть текстовый интервал на несколько пикселей относительно изображения?

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>

Answer 2

На мой взгляд, я предлагаю добавить несколько тегов div внутри логотипа.

Используя 2 тега div в float: left, мы делаем 2 div встроенным.

Объедините display: table и display: table-cell в вертикальный центр высоты делений.

.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 3

Применить 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 4

Вы можете использовать различные 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;
}