html - 响应式设计中 TD 垂直对齐的最大边距

Question

我有一个包含 3 列的表格，其中包含图库照片。右列和左列用于箭头。我希望箭头垂直放置在高度的中间，但在大屏幕上我想将箭头的上边距限制为距表格顶部不超过 80 像素。我想我正在寻找类似“最大 margin ”的东西!但我无法通过纯 css 处理它。

<table style="width:100%">
 <tr>
   <td style="width:60px;vertical-align:middle"><a>prev</a></td>
   <td>photos here</td>
   <td style="width:60px;vertical-align:middle"><a>next</a></td>
 </tr>
</table>

我期望的图像:

Answer 1

你可以像下面的例子那样使用。

td {
  vertical-align: middle;     
}
@media (min-width: 1024px) {
    td {
       vertical-align: top;
       margin-top: 80px;
       }
    }

它可能对你有用。