如何将图像与 h2 对齐？

Question

也许技术堆栈在这里并不重要，但我有一个带有 tailwind 样式的 nextjs 项目。我试图在 h2 标签旁边插入图像，但该图像的行为与我预期的不同。没有垂直重叠，就像图像占据一行，文本占据另一行。这就是我现在所拥有的：

以及生成它的代码：

 <div className="pb-3 justify-center align-center">
                <Image
                    src={logoNextjs}
                    alt="logo nextjs"
                    width={100}
                    height={100}
                />
                <div>
                    <h2 className="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl text-center">
                        Sample
                    </h2>
                </div>
                <p className="text-center pb-1 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 ">
                    Demo
                </p>
            </div>

如果我将 tailwind 中的

float-left

类添加到 nextjs 的

Image

标签，我可以使图像和 h2 稍微垂直对齐（至少它们有一些垂直重叠）：

但问题仍然是图像位于左侧，而我希望它位于文本旁边。

据我了解，

Image

基本上是一个经过一些优化的

img

标签，所以我认为简单的CSS解决方案会起作用。

如何实现图像与文本完全垂直对齐并紧邻文本的行为？

Answer 1

尝试使用

justify-content: center

添加弹性框：

<div className="flex flex-col pb-3 justify-center align-center">
  <div className="flex justify-center items-center w-full">
    <Image
      className="flex justify-center items-center w-[10rem]"
      src={
        "https://i.pinimg.com/736x/4a/2b/e7/4a2be73b1e2efb44355436c40bf496dd.jpg"
      }
      alt="logo nextjs"
      width={100}
      height={100}
    />
  </div>

  <div>
    <h2 className="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl text-center">
      Centralized Image
    </h2>
  </div>
  <p className="text-center pb-1 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 ">
    Demo
  </p>
</div>

结果：