css - 表格单元格/表格/表格单元格。不能垂直居中中间元素

Question

我正在使用表格方法为 3 个元素自动标注尺寸。 我喜欢中间得到所有剩余空间 - 第一个和最后一个单元格。 好的，这可以使用表格/表格单元格 - 表格 - 表格单元格。

但我无法为中央单元格设置垂直对齐方式？

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><div style="display: table; width: 163px; height: 80px;">

	<div style="display: table-cell; vertical-align: middle; width: 1px;">c1</div>

	<div style="display: table;>
	   <div style="display: table-cell; vertical-align: middle; width: 100%;">
	   <div>c2</div>
	   </div>
	</div>

	<div style="display: table-cell; vertical-align: middle; width: 1px;">c3<div>

</div></code></pre>
</div>
</div>

我已经对“c2”单元及其父单元尝试了很多样式，但都没有成功。 我是否必须为中央“table”列提供垂直尺寸？

我想要这种方法的解决方案(表格元素样式)

如有任何帮助，我们将不胜感激。

Answer 1

制作中央单元格 display: table-cell 也使用 vertical-align: middle:

<div style="display: table; width: 163px; height: 80px; background: coral;">
    <div style="display: table-cell; vertical-align: middle; width: 1px; background: #DDD;">c1</div>
    <div style="display: table-cell; vertical-align: middle;">
        <div>
            <div>c2</div>
        </div>
    </div>
    <div style="display: table-cell; vertical-align: middle; width: 1px; background: #DDD;">
        c3
    </div>
</div>