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>

如何保持图像与文本在同一行？

1 个答案: