Question

我知道这个问题已被问过几百次了，但我尝试了很多建议而且都不符合我的情况。

我的布局有三列，左边和右边的列表示我想在中间垂直对齐的按钮。我想将块的位置保持为“绝对”。我也不喜欢将高度设置为某个像素值，因为不同尺寸的屏幕布局应该是灵活的。

我找到了一个几乎没问题的解决方案 - 将'top'设置为50％并调整padding-top，遗憾的是这个解决方案添加了一个滚动。

以下是我到目前为止http://jsfiddle.net/z95bc/1/ - 顶部：50％和滚动的解决方案。

html：

<div class="single_image">
    <div class="wrapper">
        <div class="container">
            <div class="photo" data-ng-style="{'background-image': 'url(' + photoUrl + ')'}"
                 style="background-image: url(http://img4.wikia.nocookie.net/__cb20131213104910/disney/images/f/f6/Eiffel_Tower,_Paris.jpg);"></div>
        </div>

        <aside class="arrow_button left">
        <span data-ng-include="'/img/photoGallery/arrow.svg'" data-ng-click="showPreviousImage()"
              data-ng-if="isPreviousBtnVisible()" class="ng-scope">
            <svg x="0px" y="0px" width="16.994px" height="25.972px" viewBox="0 0 16.994 25.972" style="enable-background:new 0 0 16.994 25.972;" xml:space="preserve" class="ng-scope">
            <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#010202;" d="M16.994,22.598l-3.505,3.374L0,12.986L13.489,0l3.505,3.374
                l-9.985,9.612L16.994,22.598z"></path>
            </svg>
        </span>
        </aside>

        <aside class="arrow_button right">
        <span data-ng-include="'/img/photoGallery/arrow.svg'" data-ng-click="showNextImage()"
              data-ng-if="isNextBtnVisible()" class="ng-scope">
            <svg x="0px" y="0px" width="16.994px" height="25.972px" viewBox="0 0 16.994 25.972" style="enable-background:new 0 0 16.994 25.972;" xml:space="preserve" class="ng-scope">
            <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#010202;" d="M16.994,22.598l-3.505,3.374L0,12.986L13.489,0l3.505,3.374
                l-9.985,9.612L16.994,22.598z"></path>
            </svg>
        </span>
        </aside>
    </div>
</div>

的CSS：

.arrow_button {
    top: 50%;
    height: 100%;
    line-height: 100%;
    cursor: pointer;
    position: absolute;
    float: left;
}

    .arrow_button.left{
        left: 0px;
    }
    .arrow_button.right{
        right:0px;
    }

    .arrow_button.right svg{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

我会很感激任何建议！

Answer 1

我走高：100％;离开.arrow_button，滚动条消失了。那是你想要的吗？

垂直对齐元素

1 个答案: