Question

我正在开发有上一个和下一个按钮的页面。现在它正在使用一个表，其中第一列（td）是＆＃34;之前的＆＃34;按钮，第二列是文本，第三列是＆＃34; next＆＃34;按钮。中间列有很多文本（许多页面值），用户向下滚动以查看整个文本。这是我当前的HTML代码段：

<table><tr>
 <td class="prevnext" id="prev"></td>
 <td>
  <div id="maintext"></div>
  <div id="footnotes"></div>
 </td>
 <td class="prevnext" id="next"></td>
</tr></table>

JavaScript填充字段，它工作正常......从布局角度来看，它放置一个＆lt;对于上一页和＆gt;为下一页。我想要＆lt;和＆gt;即使用户向下滚动，也始终以文本为中心。现在它以绝对的方式集中于文本，因此必须向下滚动到文本的中间以实际看到＆lt;和＆gt;的按钮。

有没有办法制作这些按钮＆＃34; float＆＃34;但是，无论用户向下滚动它们总是在页面上垂直居中？

此外，这是我现有的CSS（非常简单）：

.prevnext {
 cursor:pointer;
 background-color:#eee;
}

如果实现它的唯一方法是使用JavaScript，我可以自己解决这个问题。但我认为JavaScript不应该被用来做CSS中固有的事情。

这是JSFiddle。

Answer 1

首先，我不建议使用表格进行布局，但它与解决方案无关。只是一张便条。

可以使用position: fixed;将对象放置在屏幕上的固定位置。

使用：

foobar {
    position: fixed;
    top: 50%;
}

http://jsfiddle.net/hyyLwoLx/

Answer 2

您需要拥有flex布局。您可以对CSS进行以下更改。

tr {
    display: flex;
    align-items: center;
}

如果有更多此类元素，则将课程提供给tr。

上一页和下一页的CSS

2 个答案: