Помещение изображения между словами заголовка

Question

Мне было интересно, сможет ли кто-нибудь мне помочь. Я пытаюсь поместить изображение между двумя словами в заголовке. например, FirstName (Изображение) LastName. Тем не менее, каждый раз, когда я пробую, изображение сдвигает слова так, что все складывается, и я хочу, чтобы оно было горизонтальным. Может кто-нибудь помочь с этим? Что я сделал до сих пор:

<div class="horizontal">
  <h1>FN LN</h1>
  <!-- box-b -->
  <div class="box-b">
    <img src="Images/Triangle.png" alt="Logo mark">
  </div>
  <!-- /box-b -->
</div>

Так что я бы хотел, чтобы изображение двигалось вверх между двумя словами.

Answer 1

Изображения - это встроенный блок элементов, которые не должны «разбивать» ваш текст на несколько строк, если проблема заключается в выравнивании, как обсуждалось здесь , вы можете использовать vertical-align в CSS чтобы выровнять изображение в соответствии с текстом.

Как то, что упоминал @Psi:

<h1>FN <img src="..."> LN</h1>

Должно работать нормально, затем настроить CSS для выравнивания