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

【问题标题】：max margin for TD vertical align in responsive design响应式设计中 TD 垂直对齐的最大边距
【发布时间】：2018-02-26 17:12:23
【问题描述】：

我有一个包含画廊照片的 3 列表格。左右列用于箭头。我希望箭头垂直放置在高度的中间，但在大屏幕中，我想将箭头的上边距限制为距离表格顶部不超过 80px。我想正在寻找类似“最大保证金”的东西！但我无法通过纯 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>

我所期望的图像：

【问题讨论】：

嗨，Sheikhpour，在大屏幕中，您需要箭头位于垂直中间还是距离顶部 80PX！！！
我想在大屏幕上距顶部 80 像素
只使用媒体查询，不要为最大边距烦恼:)
从您所期望的图像来看，您确实在寻找max-line-height。不幸的是，这也不存在。一个有趣的问题；我不知道为什么这被否决了。

标签： html css responsive-design vertical-alignment

【解决方案1】：

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

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

它可能对你有用。

【讨论】：