如何使用 CSS 实现图片和文本水平居中对齐，并且文本换行？

如何使用 css 实现内容居中对齐

你想实现的效果是：

• 图片和主要参建单位水平居中对齐
• 右侧文本换行，但第一行与参建单位对齐

css 代码实现：

<div style="display: flex; align-items: center; justify-content: center;">
  <span style="width: 100px; height: 100px; background-color: red;">图片</span>
  <p style="flex: 1">
    <span style="font-weight: bold;">主要参建单位：</span>
    这是一个很长很长很长的文本，可以换行。
  </p>
</div>

• display: flex;: 将容器设为 flex 布局。
• align-items: center;: 将所有子元素垂直居中对齐。
• justify-content: center;: 将所有子元素水平居中对齐。
• span 作为图片占位符可以自定义宽高，设置背景色为红色方便查看。
• p 标签加入 flex: 1; 属性，剩余空间自适应填充。
• span 用于加粗主要参建单位。

以上就是如何使用 CSS 实现图片和文本水平居中对齐，并且文本换行？的详细内容，更多请关注其它相关文章！