如何居中内联块的 <h2> 和 <img> 元素？[复制]

How do I center <h2> and <img> elements that are inline-block? [duplicate]

提问人：Gianluca 提问时间：1/29/2023 更新时间：1/29/2023 访问量：107

问：

这个问题在这里已经有答案了：
如何使元素水平居中？ （131 个答案）
CSS中心显示内联块？ （9 个答案）
如何在 div 块内将文本居中（水平和垂直）？ （27 个答案）
10个月前关闭。

我正在尝试对齐 h2 和 img（图标）元素，我知道我应该添加 display： inline-block，但它们移到了该部分的左侧。我怎样才能居中它们？

HTML格式：

<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>

CSS：

img {
  display: inline-block;
  vertical-align: -8px;
}

h2 {
  display: inline-block;
  text-align: center;
}

截屏

HTML CSS格式

评论

答：

-1赞 user1314836 1/29/2023 #1

使用 a 将所有内容（文本和图像）居中：<div>text-align

<style>
div
{
    text-align: center;
}
</style>

<div>
  <h2>Coffee</h2>
  <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
</div>
-1赞 Yash porwal 1/29/2023 #2

您可以将 h2 和 img 标签包装在父 div 中，以便您可以轻松地应用 flexbox 属性并将这两个元素居中。

div{
  display:flex;
  justify-content:center;
  align-items:center;
}
div img{
  margin-left:10px;
}
<div>
  <h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
</div>

-1赞 Pramod Singh 1/29/2023 #3

要使文本“Coffee”和杯子图像在屏幕截图中所示的部分居中，您可以添加到 CSS 中的元素。这会将截面内的所有元素与中心对齐。text-align: center<section>

section {
  text-align: center;
}

作为内联块，宽度成为文本“Coffee”的长度。因此，不起作用。<h2>text-align: center

上一个：每个元素都应该遍历，但显然不是

下一个：ScrollMagic 动画和滚动锁定问题