图像上的填充答案

【问题标题】：Image over padding图像上的填充
【发布时间】：2017-06-17 06:07:45
【问题描述】：

我正在尝试在标题内的文本旁边添加图像，但图像超出了填充。

body {
  margin: 0;
  padding: 0;
}

header {
  width: 95%;
  margin: 10px auto;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: blue;
}

<body>
  <header>
    <img src="http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px">
    <h1 style="display: inline-block;">
      Hi!
    </h1>
  </header>
</body>

我需要它们垂直对齐在一起，并且图像停止在填充顶部。

这与 stackoverflow 上的其他示例不同，因为我在这里使用填充。

【问题讨论】：

@DaniSpringer 它在 jsfiddle..
你在width:95%之后缺少;
@j08691 我解决了这个问题，但问题仍然存在
how to vertically align text next to a floated image?的可能重复

标签： html css

【解决方案1】：

您可以使用Flex使文字与图片相邻：

div {
  display: flex;
  align-items: center;
}
header {
  width: 95%;
  margin: 10px auto;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: white;
}

<div>
  <img src="http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px">
  <h1>Hi!</h1>
</div>

在此处了解有关 Flex 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

是的，成功了！谢谢，我不知道 flex。
@Chormi 没问题 :) Flex 实际上真的很酷。我将在我的帖子中包含一个关于它的链接。

【解决方案2】：

尝试将此添加到您的 css 文件中：

h1 {margin-top:10px;}

并将 "align=left" 添加到

<img src = "http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px" align="left">

【讨论】：

不建议使用基于样式的属性，例如 align，因为它们在 HTML5 中已过时。