主页 / coding / 问题 / 77878717
Accepted
XM01 - stands with Palestine
Asked: 2024-01-25 17:14:11 +0800 CST

如何使文本在图像中垂直和水平居中？

  • 772

我正在使用 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。

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

html

2 个回答

  1. Best Answer
    1. 包裹您的图像和段落
    2. 对段落使用绝对定位
    3. 将文本水平和垂直居中。

    <div className="relative">
  <img src="img/slider1.png" alt="slider1" />
  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
    <p className="font-bold mb-2">This paragraph is full of cats</p>
    <p>This paragraph is not.</p>
  </div>
</div>

    • 3

  2. 您可以像这样更改您的代码。使用div来包裹它。

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

    添加h-screen到外部 div 以确保它占据视口的整个高度。

    还可以使用附加项div将段落水平和垂直居中。

    • 0

相关问题