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

Question

我有一个 table 包含 3 列的画廊照片。右列和左列用于箭头。我希望箭头垂直放置在高度的中间，但在大屏幕上我想将箭头的上边距限制为距 table 顶部不超过 80 像素。我想我正在寻找类似 "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;
       }
    }

可能对你有用。