Как сохранить изображение на одной строке с текстом?

Question

Я пытаюсь сохранить логотип этой компании в одной строке с названием.Как вы можете видеть на изображении, оно находится под заголовком ALT, и я хочу, чтобы оно было справа от него. см. Изображение

Это мой код,

#fh5co-logo {
  font-size: 24px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-weight: 700;
  font-family: "Work Sans", Arial, sans-serif;
}

<div id="fh5co-logo"><a href="index.html">ALT<span>.     
         <img src="https://placehold.it/100x100" height=100px width=100px title="lab"></span></a></div>

Answer 1

Для этого можно использовать flex.

Обернуть текст в промежуток и применить его к элементу a:

#fh5co-logo {
  font-size: 24px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-weight: 700;
  font-family: "Work Sans", Arial, sans-serif;
}

#fh5co-logo a{
  display: flex;
  align-items:center;
}

<div id="fh5co-logo">
  <a href="index.html">
    <span>ALT.</span>
    <img src="https://www.graphicsprings.com/filestorage/images/283/logomakersamples45.png?width=150&height=70&quality=80&crop=0&method=crop" title="lab">
  </a>
</div>