如何在HTML和CSS中将文本与图像对齐

我尝试将文本与图片中的图像对齐，如下图所示（在中间留出空格）。从图中可以看出，“成长之路”和“社交机会”文本分别与人的手和钱包图片相近。所以我需要编码一种方法，使这些文本更接近它们各自的图像。那更靠左

以下是页面的完整Html和CSS：

/*img{
-webkit过滤器：灰度（100%）对比度（110%）模糊（1px）；Chrome、Safari、Opera
/*滤镜：灰度（100%）*/
.测试{
宽度：100%；
高度：700px；
背景尺寸：封面；
背景图片：url（“//ehealth4everyone.com/wp content/uploads/2019/07/Group-510.jpg”）；
文本对齐：居中；
}
克拉皮姆先生{
最大宽度：70%；
浮动：左；
填充：10px；
}
.clapimg2{
最大宽度：30%；
/*浮动：对*/
填充：10px；
边界半径：50px；
}
.内容{
利润率最高：20%；
左缘：20%；
颜色：白色！重要；
文本对齐：对齐；
}
.btn默认值{
背景色：#ffffff！重要；
颜色：黑色；
}
.按钮{
背景色：#2372B7；
颜色：白色；
显示：块；
高度：40px；
线高：40px；
文字装饰：无；
宽度：100px；
文本对齐：居中；
边界半径：5px；
}
/*设置用于打开和关闭可折叠内容的按钮的样式*/
.可折叠{
背景色：#2372B7；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
.活动，.可折叠：悬停{
背景色：#ccc；
}
/*设置可折叠内容的样式。注意：默认情况下隐藏*/
.放下{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#2372B7；
}
.可折叠：之后{
内容：'\02795'；/*表示加号（+）的Unicode字符*/
字体大小：13px；
颜色：白色；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2796”/*表示减号（-）的Unicode字符*/
}

[vc\u行][vc\u列][vc\u列文字]

卫生技术
实习
寻求在卫生领域发展创新技术技能？那么这个实习是为你准备的


我们正在寻找那些以结果为导向、目标驱动、自我激励、专注并通过努力工作和承诺发展技能的人。
增长途径


网络机会
我们提供了一个平台和机会，与您所在领域的其他人合作，建立有意义的联系。
基于绩效的津贴
实习生将根据任务完成情况和每周表现获得津贴。
专业领域
程序设计
设计
开发操作
资料
公共卫生
软件测试
谁可以申请
只要愿意学习并努力学习就可以了。
实习要求

计算机（最好是笔记本电脑）
工作的互联网连接
学习的意愿

规则
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德

常见问题
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德

[/vc\u column\u text][/vc\u column][/vc\u row]

试试这段代码，完成后让我更新一下

.test{
宽度：100%；
高度：700px；
背景尺寸：封面；
背景图片：url（“//ehealth4everyone.com/wp content/uploads/2019/07/Group-510.jpg”）；
文本对齐：居中；
}
克拉皮姆先生{
最大宽度：70%；
浮动：左；
填充：10px；
}
.clapimg2{
最大宽度：30%；
/*浮动：对*/
填充：10px；
边界半径：50px；
}
.内容{
利润率最高：20%；
左缘：20%；
颜色：白色！重要；
文本对齐：对齐；
}
.btn默认值{
背景色：#ffffff！重要；
颜色：黑色；
}
.按钮{
背景色：#2372B7；
颜色：白色；
显示：块；
高度：40px；
线高：40px；
文字装饰：无；
宽度：100px；
文本对齐：居中；
边界半径：5px；
}
/*设置用于打开和关闭可折叠内容的按钮的样式*/
.可折叠{
背景色：#2372B7；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
.活动，.可折叠：悬停{
背景色：#ccc；
}
/*设置可折叠内容的样式。注意：默认情况下隐藏*/
.放下{
填充：0
<div class="col-md-6" style="margin-left:5em">
          <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-9.jpg" class="clapimg"></div>


<div class="col-md-6" style="margin-left:5em">
          <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-11.jpg" class="clapimg"></div>

.clapimg{
  max-width:70%;
  float:left;
  padding:10px;
  margin:5em;
}

.clapimg2{
  max-width:30%;
/*   float:right; */
  padding:10px;
  border-radius:50px;
  margin:5em;
}