XMehdi01's questions

我目前正在开发一个名为 PolitiqueContent 的 React 组件，我在其中显示带有指向不同部分的箭头的信息。每个箭头都与标题和内容相关联，我在实现所需的显示方面面临困难。

这是我当前的代码：

import React from "react";

const PolitiqueConeten = () => {
  return (
    <div className="flex justify-center">
      {/* First Arrows  */}
      {/* Title */}
      <h2>Title 1</h2>
      <br />
      {/* Content */}
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
        quibusdam?
      </p>
      {/* Third Arrows  */}
      <h2>Title 3</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga,
        laboriosam.
      </p>
      <img
        className="w-5/6"
        src="img/backgrounddPool.png"
        alt="backroundPool"
      />
      {/* Second Arrows  */}
      <h2>Title 2</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo,
        accusamus?
      </p>
      {/* Forth Arrows  */}
      <h2>Title 4</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
        perspiciatis!
      </p>
    </div>
  );
};

export default PolitiqueConeten;

我的代码的输出：

我想要这样的：

我感谢任何有关如何构建 JSX 或修改我的代码以实现预期布局的指导或建议。预先感谢您的帮助

我正在使用 Tailwind CSS 开发一个 React 组件，并且我正在尝试实现特定的布局。我有一张div图片和里面的两个段落。我希望段落在水平和垂直方向上居中，div以便它们出现在图像的中心。

这是我当前的代码：

<div className="flex flex-col items-center justify-center text-center">
  <img src="img/slider1.png" alt="slider1" className="mb-4" />
  <p className="font-bold">This paragraph is full of cats</p>
  <p>This paragraph is not.</p>
</div>

尽管使用了items-center和justify-center，文本并未完全对齐图像的中心。我希望两个段落都位于水平和垂直方向的中心div。

对我当前方法的任何建议或更正将不胜感激。谢谢你！