如何在分屏 window 中间放置一个向下滚动按钮？

Question

这里的分屏和这个类似：http://codepen.io/rileyjshaw/pen/vGLvVo

我正在尝试在其上放置一个向下滚动按钮。如何将此按钮放置在 window 的中央和底部？

HTML:

.half
    p These panes always split the window in the correct direction.
.half
    p
        | Pure CSS, only 5 rules.
        span.social
            | by  
            a[target='_blank' href='https://twitter.com/rileyjshaw'] rileyjshaw
            |.

CSS:

// Maximum aspect ratio beforem switching to a vertical split.
$ASPECT_W: 4
$ASPECT_H: 3

// All you need, right here:
body
    display: flex
    flex-wrap: wrap

.half
    width: 100%
    flex-basis: $ASPECT_W / ($ASPECT_W + $ASPECT_H) * 100vh
    flex-grow: 1

// Good night, and good luck.

















// Doop, de boop boop...





















// Unrelated visual styles:
html, body
    height: 100%
    width: 100%
    margin: 0

.half
    position: relative
    font: 600 32px Poppins, sans-serif
    color: #f6e8ea
    background: #ef626c
    + .half
        background: #84dcff

p
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    width: 72%
    margin: 0
    text-align: center

.social
    display: block
    max-height: 0
    opacity: 0
    animation: appear 1s 4s

a
    color: #f9eef0

@keyframes appear
    50%
        max-height: 2em
        opacity: 0
    100%
        max-height: 2em


opacity: 1

Answer 1

解决您的问题的方法是创建一个具有绝对位置的 div。然后你可以将它对齐到中心和底部。这是我使用示例代码笔创建的一些示例 HTML 和 CSS：http://codepen.io/tcaer/pen/xOpjBB

HTML:

<div class="button"></div>

CSS:

 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
 bottom: 100px;

如果您需要在另一个 div 中使用 position: absolute，只需将 position: relative 放在父容器中即可。

Answer 2

在我的例子中，我必须在屏幕中间放置一个 scroll_down 图标，并且在单击时还必须向下滚动到下一部分。

CSS:

scrolldown{
    position: absolute;
        z-index: 2;
        left: 45%;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        bottom: 0%;

    }

HTML:

    <div class="scrolldown">
  <a href="#sectionId"><img src="images/scroll_down_homepage.gif" /></a>
</div>

<section id="sectionId">
//Content
</section>

如何在分屏 window 中间放置一个向下滚动按钮？

How to place a scroll down button in the middle of split screen window?

html

css

frontend