Html 带对齐的水平div

我试图摆脱使用表格布局来做特定布局的习惯。我知道这是草率的编程，所以我正在重做。我似乎无法使用div标记重新创建类似的内容：

<table border=10 cellpadding=10 width="90%">
    <tr>
        <td align="center" width="143">
            <img src="http://blah.com/images/133widepixelimage.jpg">
        </td>
        <td align="center">
            Some text describing the image
        </td>
    </tr>
</table>

一些描述图像的文本

我已经在CSS文件中完成了边框、填充、宽度和对齐，效果很好。但是设置居中图像的宽度仍然不允许居中文本显示在图像的右侧。它仍然会换行到下一行。如果我将图像居中放置在左侧，并设置

float:left

，则效果良好。但即使父div足够宽，也不能以两个为中心。

尝试以下代码段：

.container{
边缘顶部：30px；
宽度：90%；
显示器：flex；
边框：10px纯黑；
高度：50px；
左边框颜色：灰色；
边框顶部颜色：灰色；
}
.img{
宽度：143px；
}
.img>img{
宽度：100%；
}
.container>div{
垂直对齐：中间对齐；
线高：40px；
文本对齐：居中；
保证金：1px；
边框：1px纯黑；
显示：内联块；
}
.文本{
弹性：1；
}

一些描述图像的文本

Ok。我知道这是怎么回事。但让我们把它复杂一点。2x2网格怎么样，没有任何类型的边框（容器边框除外），左两行中的图像大小不同，左上角的文本居中，左下角的文本左对齐。为了获得额外的积分，请将左行宽度设置为比最宽图像的宽度大20。哎呀。。。将文本位置设为topleft=topright和bottomleft=bottomright。@user2021539这不是OP问题。我只是让你看看你一开始问的问题。