HTML5 - 在图像旁边放置 h1 文本答案

【问题标题】：HTML5 - position h1 text next its imageHTML5 - 在图像旁边放置 h1 文本
【发布时间】：2015-09-26 11:03:25
【问题描述】：

我正在尝试在标志图像旁边放入一个 H1 标记的 HEADER 标记，如下所示：

/* line 1, ../scss/layout/_header.scss */
header {
  background: white;
  color: red;
  height: 100px;
}

header img.logoImage{
    width:30px;
    height:30px;
}
/* line 6, ../scss/layout/_header.scss */
header h1#companyName {
  padding: 20px;
  font-size: 20px;
    
}
/* line 10, ../scss/layout/_header.scss */
header h1#companyName a .logoImage {

}

   <header>     
     <h1 id="companyName">
      <a href="#" title="Company Website">
        <img class="logoImage" title="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSd51Q5z8j6c_EBEYzZgU1pfyiGHxOUgchpUs9wC3eaFn6PrXfqe8kjWA" alt="Company Name"/>
          Company name
      </a>    
    </h1>           
   </header>

问题是“某些标题”没有显示，因为它停留在图像下方。另外，这是实现它的好方法吗？（搜索引擎优化等）

你能解释一下吗？

谢谢！

【问题讨论】：

“某些标题”不应显示在任何内容下。它是一个 alt 属性，将（在大多数浏览器中）显示为工具提示。我无法用您提供的代码重现您描述的问题。
感谢您的建议。那么，您有什么替代建议？
要么描述您向我们展示的代码给您带来的问题，要么向我们展示演示您描述的问题的代码。
谢谢！这是相关的 jsFiddle 演示 --> jsfiddle.net/beppe0/hpjy81pL
为什么要使用img 元素，然后在其上放置背景图像？（强制）src 属性在哪里？为什么 JS Fiddle 上的大部分内容都不是问题？

标签： javascript css html seo

【解决方案1】：

你可以在selector之后试试css：

.logoImage:after { content:attr(alt);}

【讨论】：