如何将图像保持在与文本相同的行上？

Question

我想保持这家公司的标识与标题相同。正如您在图像中看到的那样，它位于ALT标题下方，我希望它位于右侧。 see image

这是我的代码，

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