
居中对齐带有图片和多行文本的段落
您需要制作一个 html 段落,其中图片、主要内容和右对齐文本居中对齐。同时,右对齐文本第一行应该与主要内容对齐。
以下是实现此效果的代码:
图片或图标占位符
右边文字可以换行,但第一行与参建单位对齐主要内容
参建单位
示例效果:
[图片示例]
代码解析:
- 使用 display: flex 布局 div 以水平居中对齐其子元素。
- align-items: center 垂直居中对齐子元素。
- justify-content: center 水平居中对齐子元素。
- 给 p 标签设置 flex: 1,当页面宽度不足以容纳其内容时换行。
- 右对齐文本放在一个 span 内,并使用 text-align: right 对齐。










