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

你想实现的效果是：

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 用于加粗主要参建单位。