如何使用 HTML CSS 对齐图像并避免标题下方的文本答案

【问题标题】：How align a image and avoid text below in title using HTML CSS如何使用 HTML CSS 对齐图像并避免标题下方的文本
【发布时间】：2016-05-25 10:55:26
【问题描述】：

我想创建一个带有图标的页眉。但是有时页面标题会变得太大而换行。

现在我的结果是：

但我想得到这个结果（photoshoped）

重要！图标必须与第一行对齐，如上图。

这是我的 HTML 代码：

<div class="page-header">
<div class="header-icon"><img src="to_do.png"></div>
<h1  class="page-title" >Não está em aula <small>2016-02-14  14:04</small></h1>
</div>

这是我的 CSS

.page-header .header-icon{
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}

.page-header .page-title{
    display: inline;
    vertical-align: middle;
}

【问题讨论】：

标签： html css image alignment vertical-alignment

【解决方案1】：

非常简单的答案（有些人会不赞成）是创建一个 2 列 1 行的表格 - 图像在第一列，文本在第二列。

这样，任何文本溢出都会在第二列中得到满足 - 保持图像和文本之间的分离。

我认为当您在一行上有图像/文本组合时（这种情况经常发生），使用简单的演示表是完全可以接受的。

不管别人怎么说，这是最简单的方法。

【讨论】：

【解决方案2】：

您可以为图标定义更大的高度。为此，您必须在 .header-icon 类中添加 float:left 和固定定义的 height。

例如这样：

.page-header {
  width: 400px;
}
.page-header .header-icon {
  display: block;
  vertical-align: middle;
  padding-right: 10px;
  float: left;
  height: 100px;
}
.page-header .page-title {
  display: inline;
  vertical-align: middle;
}

<div class="page-header">
  <div class="header-icon">
    <img src="http://placehold.it/30x30">
  </div>
  <h1 class="page-title">Não está em aula <small>2016-02-14  14:04</small></h1>
</div>

您也可以将padding-bottom 用于.header-icon 类。

【讨论】：