如何将设置为inline-block的<h2>与<img>元素居中？

方法1：通过父容器的text-align: center实现 #

由于你将h2和img设置为inline-block，它们属于行内级元素，只需给它们的父容器<section>添加text-align: center，即可让这两个元素整体在section内水平居中：

section {
  text-align: center;
}

注意：你给h2设置的text-align: center是用来让h2内部的文本居中，而非让h2元素本身在父容器中居中，这个属性作用于元素内部内容，不影响元素自身的位置。

方法2：使用Flex布局（更灵活的现代方案） #

给父容器<section>设置Flex布局，直接控制子元素的对齐方式，这种方案适配性更强，还能同时实现垂直居中：

section {
  display: flex;
  justify-content: center; /* 水平居中核心属性 */
  align-items: center; /* 可选，让图标与文字垂直居中对齐 */
  gap: 10px; /* 可选，给文字和图标之间添加间距 */
}

使用Flex布局时，你可以去掉h2和img上的display: inline-block，因为Flex子元素默认会以合适的方式排列，无需额外设置行内块属性。

内容的提问来源于stack exchange，提问作者Gianluca