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

Question

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

现在我的结果是：

但我想得到这个结果（照片处理）

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

这是我的 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;
}

Answer 1

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

这样，任何文本溢出都会在第二列内得到解决 - 图像和文本之间的分隔得以保持。

我认为这是一个完美的接受table当你在一行上有一个图像/文本组合（经常发生）时使用简单的演示table。

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

Answer 2

您可以为图标定义更大的高度。为此，您必须在 .header-icon class.

中添加 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 class。

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

How align a image and avoid text below in title using HTML CSS

html

css

image

alignment

vertical-alignment