Html CSS-具有相同高度、设置宽度和垂直对齐的列

我正在尝试创建两列高度相等但宽度设置为%的列

其中一列将包含应垂直对齐的文本。我尝试使用

display:table cell

，但无法正确设置宽度

此图显示了我正在努力实现的目标：

---

有什么想法吗？

您可以使用CSS Flexbox。请看下面的代码片段：

.box{
显示器：flex；
对齐项目：居中；
}
.box img{
弹性系数：0.6；
}
.box.text{
弹性系数：0.4；
}

Lorem ipsum dolor sit amet，奉献精英。建筑设计师在公共部门采购、消费、劳动和铜酸盐方面的经验证明，这是一种合理的方法。

您可以使用CSS Flexbox。请看下面的代码片段：

.box{
显示器：flex；
对齐项目：居中；
}
.box img{
弹性系数：0.6；
}
.box.text{
弹性系数：0.4；
}

Lorem ipsum dolor sit amet，奉献精英。建筑设计师在公共部门采购、消费、劳动和铜酸盐方面的经验证明，这是一种合理的方法。

为了更好地支持浏览器，您可以使用

显示：表格和
显示：表格单元格


.outer{
显示：表格；
宽度：100%；
}
.内部{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
高度：200px；
}
.六十{
宽度：60%；
背景颜色：灰色；
}
四十{
宽度：40%；
背景颜色：粉红色；
}

这是一幅图像

宽度=60%
这是一些文本

宽度=40%

文本=垂直对齐
为了更好地支持浏览器，您可以使用
显示：表格和
显示：表格单元格


.outer{
显示：表格；
宽度：100%；
}
.内部{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
高度：200px；
}
.六十{
宽度：60%；
背景颜色：灰色；
}
四十{
宽度：40%；
背景颜色：粉红色；
}

这是一幅图像

宽度=60%
这是一些文本

宽度=40%

文本=垂直对齐
能否共享HTML结构？为什么不能使用表格单元格正确设置宽度？能否共享HTML结构？为什么不能使用表格单元格正确设置宽度？