Html 如何在图像中垂直和水平居中显示文本

<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>

<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>

Html相关问答推荐

Rmarkdown上的垂直标签集

z—index总是 destruct 我的头，我该如何修复它？

由于列中的图像，它们不会随FlexBox中的窗口大小进行调整

悬停效果在新西兰表上不起作用

更改Angular 为17的material Select 字段的高度？

高度：适合-内容不拉伸以适合内部长度

如何使div填充父项的剩余高度

在 HTML 视频上环绕文本叠加

如何在黑暗模式切换中添加图标

使用shinyjqui拖放到网格表中

如何使用 Flutter 构建 Chrome 扩展？

在Firefox中使用keySplines时，SVG： <animateMotion>不起作用

屏幕缩小时背景图像裁剪高度

输入框不是全宽

如何将自定义图像插入 Shiny plot header？

Mediawiki css/html 信息框创建空白行

如何在没有容器的情况下沿基线将 div 中的元素居中？

本地 css 样式表未链接

是否可以设置用户在联系表单中输入的文本字体的样式

如何在不删除

标记的情况下加入 HTML 中的段落