logo 和 h1 标题使用 html 和 css 出现在同一行答案

【问题标题】：logo and h1 heading appear on same line using html and csslogo 和 h1 标题使用 html 和 css 出现在同一行
【发布时间】：2016-06-02 12:24:23
【问题描述】：

我想创建一个网页，但在将徽标显示在标题附近时遇到了问题。我已经尝试了以下代码，但这不会产生预期的结果。

我有以下代码：

.line .box .header img {
  float: left;
}

.line .box.header h1 {
  position: relative;
  top: 1px;
  left: 10px;
}

<div class="line">
   <div class="box">
      <div class="s-6 l-2"> 
         <div class="header">
             <img src="img/hrcimg.jpg" alt="logo">
             <h1>United Nations Human Rights Council</h1>
        </div>
      </div>
   </div>
</div>

网站屏幕

【问题讨论】：

display:inline 怎么样？
试过了。不工作。
尝试将 logo 放在 h1 标签内
我想你在其他地方有另一种风格，它会覆盖你在这里尝试做的事情，因为它对我来说很好。
为什么那一栏看起来这么小？如果文本是这样换行的，就没有空间让它坐在图像的右边。如果没有可参考的活生生的例子，很难真正解决问题。考虑创建一个可以链接到的笔，其中包含相关的样式和/或框架，以便我们更好地了解整体情况。

标签： html css heading

【解决方案1】：

你需要增加.l-2元素的宽度。

将此元素的宽度设置为 100% 将导致您的问题的标题回避到的布局。

当达到较低的分辨率时，您需要相应地调整这些样式，以便将结构保持在一个点上。
一旦分辨率达到移动比例，请考虑以自己的线条显示它们。这可以通过将徽标设置为显示为block 和width: 100%; 和height: auto; 来完成，此时您还需要终止float 规则。

【讨论】：

【解决方案2】：

所以我做了一点点东西，如果我错了，请纠正我：)

.line img {
  float: left;
}

.line h1 {
  position:relative;
  float:left;
  top: 1px;
  left: 10px;
}

https://jsfiddle.net/3an65dfp/3/

【讨论】：

【解决方案3】：

试试这个：

img, h1 {
  display: inline-block;
  vertical-align: middle;
}

<header>
  <img src="http://placehold.it/100x100">
  <h1>COMPANY NAME</h1>
</header>

【讨论】：