获取仅使用 CSS 的表格来处理图片

如何解决获取仅使用 CSS 的表格来处理图片

我想用纯 CSS 做一个表格，因为我需要做一个与移动设备兼容的代码版本，然后我可以更改 CSS 以消除我的表格。目前我在让文本正确显示时遇到问题。我希望文本显示在与图片相对的列中居中。目前它出现在相对列的底部，几乎就像是图片底部的一个移位标题。然后我想在表格中交替使用其中的一些图片和文字，如下所示

picture|text
text   |picture
picture|text
text   |picture

这些是我正在使用的文件的基本部分。出于提问的目的，我已临时链接到维基百科图片。


<html>
<head>
<link href="tables-etc2.css"  media="screen and (min-width: 900px)"  rel="stylesheet" type="text/css" title="stylesheet">
</head>
<body>
<link href="tables-etc2.css"  rel="stylesheet" type="text/css" title="stylesheet">
<div class="table">
  <div class="table-row">
    <div class="table-cell"><image src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Parliament_at_Sunset.JPG/320px-Parliament_at_Sunset.JPG ">
    </div>
    <div class="table-cell">
           This is some text I want to display directly opposite the picture.
    </div>
  </div>
 
 
</div>

和 CSS 文件

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  table-layout: auto;
  width: 500px;
  display: table-cell;
  padding: 10px;
}

我希望这足以让您能够指导我。如果有任何帮助，我正在 Ubuntu 上使用 firefox 进行开发。