垂直對齊一個元素

我知道這個問題已經被問過幾百次了，但我嘗試了很多建議，都不適合我的場景。垂直對齊一個元素

我的佈局有三列，左邊和右邊的代表我想在中間垂直對齊的按鈕。我想保留塊的位置爲'絕對'。我也不喜歡將高度設置爲某個像素值，因爲佈局對於不同尺寸的屏幕應該是靈活的。

我發現了一個幾乎可以正常工作的解決方案 - 將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); 
    }

我將不勝感激任何建議！

來源

2014-03-30 Anelook

我把身高：100％;關閉.arrow_button和滾動條消失。那是你想要的嗎？

來源

2014-03-30 20:56:05 SkelDave

非常好！請注意，如果將「擱置」設置爲「高度：100％」的原因是爲了提供更大的點擊目標，則需要稍微更復雜的更改。 –

垂直對齊一個元素

回答

相關問題