Question

我正在尝试在标题内的文本旁边添加图像，但图像位于填充上方。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

这与stackoverflow上的其他示例不同，因为这里我使用了paddings。

Answer 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/

Answer 2

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

h1 {margin-top:10px;}

并将＆＃34; align = left＆＃34; 添加到

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

填充图像

2 个答案: