在标题中的文本旁边放置徽标答案

【问题标题】：Place Logo next to text in header在标题中的文本旁边放置徽标
【发布时间】：2015-11-10 05:25:00
【问题描述】：

我正在尝试将我的徽标放在我网页标题中的文本旁边。我玩过 's，但我能做的最好的就是让徽标位于测试的顶部。我怎样才能解决这个问题？

 <header>
    <div class="header-content">
        <div class="header-content-inner">
            <img src="img/blue.png"><h1>WELCOME</h1>

            <p></p>
          </div>
 </header>

  <!-- CSS BEGINS -->
  header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #000;
    background-image: url();
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
 }

  header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
 }


  header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: lowercase;
   font-weight: 700;
   color:gray;
  }

【问题讨论】：

您可以尝试使用CSS属性float

标签： html css image

【解决方案1】：

使用 css 将图像向左浮动：

.header-content-inner img {
  float: left;   
}

这是一个有效的小提琴示例：https://jsfiddle.net/0ocu4pt8/

【讨论】：

谢谢，看起来好多了。有没有办法让它更接近中心的文字？
谢谢 - 这是否与
中的文本大小相互作用？它使它显着变小。
H1 显示为“块”，为了使其折叠，我需要添加“内联块”。将 H1 保留为“块”并在徽标的宽度上添加左边距也可以实现相同的效果。

【解决方案2】：

默认情况下，标题标签 (h1-h6) 使用display:block，这意味着它们占据了其父容器的整个宽度。相反，您可以将 h1 设置为使用 display: inline-block。这将使它只占用它需要的宽度，因此它可以显示在与图像相同的行上。因此，您的 CSS 规则将变为：

  header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: lowercase;
   font-weight: 700;
   color:gray;
   display: inline-block;
  }

【讨论】：

【解决方案3】：

您可以将图像向左浮动！

float: left;

^ 只需将其添加到图像类中即可。

【讨论】：

中的文本大小相互作用？它使它显着变小。