Question

我仅使用 HTML 和 CSS 编写一些代码。在标题中，我有1张图片和它后面的一些文字。我需要将它们放在一行中，以使其看起来像普通的标头。

我正尝试使用 display：inline-block ，但由于某些原因它不起作用

 header{
        display: inline-block;
        width: auto;
    }

<header>
    <img src="https://picsum.photos/200" height="35" width="35" />
    <h1>Learn about your game</h1>
</header>

Answer 1

使用flex

header {
    display: flex;
    align-items: center
}

Answer 2

.image-text {
display: flex;
align-items: center;
}
.image-text__image {
flex: 0 0 auto;
padding: 1em;
}
.image-text__image img {
display: block;
}
.image-text__text {
flex: 1 1 auto;
padding: 1em;
}

<header>
 <div class="image-text">
  <div class="image-text__image">
   <img src="https://picsum.photos/200" height="35" width="35" />
  </div>
  <div class="image-text__text">
   <h1>Learn about your game</h1>
  </div>
 </div>
</header>

Answer 3

使用Flexbox：-

>> [ 6 15 16  9 18]

Answer 4

header{
            display: flex;
            width: 90%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 20px auto;
            background-color: red;
            text-align: center;
        }
        header img,header h1{
            display: block;
            width: 80%;
            margin: 5px auto;

        }
    </style>

将此添加到您的CSS

如何在一行中放置两个元素（图像和文本）

4 个答案: