响应式设计中TD垂直对齐的最大余量

Question

我有一个包含3列的表格，用于保存图库照片。右列和左列用于箭头。我希望箭头垂直放置在高度中间，但在大屏幕中，我想将箭头的上边距限制为不超过表顶部80px。我想我正在寻找像“max-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;
       }
    }

它可能对你有用。