CODEWITHSUNDEEP
htmlcss
Anelook
Anelook

Reputation: 1277

vertically aligning an element

My layout has kind of three columns, the left and right ones represent buttons which I want to vertically align in the middle. I would like to keep the position of the blocks as 'absolute'. I also don't like setting height to some pixel value, as the layout should be flexible for different sizes of screens.

I found a solution that works almost fine - setting 'top' to 50% and adjusting padding-top, sadly this solution adds a scroll.

Here is what I have so far http://jsfiddle.net/z95bc/1/ - the solution with top:50% and scrolling.

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);
    }

Upvotes: 1

Views: 211

Answers (1)

SkelDave
SkelDave

Reputation: 1186

I took the height:100%; off the .arrow_button and the scroll bars went away. Is that what you wanted?

Upvotes: 3

Related Questions