垂直對齊頁腳多個元件具有可變高度

Question

我有具有可變高度頁腳。最大的元素是通過頁腳填充自動居中的圖像。在圖片旁邊有一個小導航和一個版權聲明如下。在最右邊有一個按鈕可以返回頂部。

我已經包含了小提琴，我得到了所有的元素垂直居中，但我加入了高度上的一些元素得到的結果。現在我的問題是，如果有辦法實現這個結果，但不增加最大元素的高度？

My fiddle

.footer { 
 
     background: darkgray; 
 
    } 
 
    .wrap { 
 
     position: relative; 
 
     width: 960px; 
 
     margin: 0 auto; 
 
     padding: 30px 0; 
 
    } 
 
    .wrap:after { 
 
     content: ""; 
 
     display: table; 
 
     clear: both; 
 
    } 
 
    .left { 
 
     width: 29%; 
 
     float: left; 
 
    } 
 
    .left img { 
 
     height: 160px; 
 
    } 
 
    .center { 
 
     text-align: center; 
 
     float: left; 
 
     width: 50%; 
 
     height: 160px; 
 
    } 
 
    .center-wrap { 
 
     display: inline-block; 
 
     vertical-align: middle; 
 
    } 
 
    .center:before { 
 
     content: ''; 
 
     display: inline-block; 
 
     height: 100%; 
 
     vertical-align: middle; 
 
     margin-right: -0.25em; 
 
    } 
 
    .right { 
 
     position: relative; 
 
     float: left; 
 
     width: 20%; 
 
     height: 160px; 
 
    } 
 
    .right a { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 50%; 
 
     margin-top: -25px; 
 
    } 
 
    
 
    /* Styles */ 
 
    nav ul { 
 
     list-style: none; 
 
     padding: 0; 
 
     margin: 0; 
 
    } 
 
    nav ul li { 
 
     display: inline-block; 
 
     margin-left: 20px 
 
    } 
 
    nav ul li:first-child { 
 
     margin-left: 0; 
 
    } 
 
    .right a { 
 
     display: block; 
 
     width: 50px; 
 
     height: 50px; 
 
     background: black; 
 
    }

<div class="footer"> 
 
     <div class="wrap"> 
 
    
 
     <div class="left"> 
 
      <img src="http://placehold.it/500x500" alt="" /> 
 
     </div> 
 
     
 
     <div class="center"> 
 
      <div class="center-wrap"> 
 
      <nav> 
 
       <ul> 
 
       <li>item 1</li> 
 
       <li>item 2</li> 
 
       <li>item 3</li> 
 
       <li>item 4</li> 
 
       </ul> 
 
      </nav> 
 
      <p>&copy; 2015 copyright COMPANY NAME // All Rights Reserved</p> 
 
      </div> 
 
     </div> 
 
    
 
     <div class="right"> 
 
      <a href="">top</a> 
 
     </div> 
 
    
 
     </div> 
 
    </div>

Answer 1

您可以垂直對齊只有3 CSS的線什麼。

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

堅果。

不要忘記供應商前綴。