如何在包装中的中间垂直对齐横幅

Question

我需要根据容器div的高度垂直对齐横幅。我试过，但它不是对准

<div id="left-ad"> 
    <div id="sidebar"> <a href="#"><img src="sidewall.png" alt="LEft Banner" ></a> 

    </div> 
</div> 
<div class="right-ad"> <a href="#"><img src="wad.jpg" alt="Right Banner" style="border-width: 0px" ></a> 

</div> 
<div class=wrapper>//center body part</div> 

小提琴：http://fiddle.jshell.net/6w7dvbzd/

Answer 1

一个选项，将显示：表的容器，并显示：表细胞和垂直对齐：中间的孩子，像这样：

HTML：

<div class=wrapper> 
    <div class="content">Content</div> 
</div> 

CSS：

.wrapper { 
    display: table; 
} 

.wrapper .content { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

更新JS小提琴：

http://fiddle.jshell.net/6w7dvbzd/1/

Answer 2

HTML：

<div class="wraper"> 
    <img src=image src"/> 
</div> 

CSS：

.wraper{ 
    position: relative 
    height: 160px; 
    width: 160px; 
    } 
img { 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto 
} 

Answer 3

添加到.wrapper行高和文字对齐这样的：

基于w的行高说唱高度

.wrapper { 
    width:200px; 
    margin:0 auto; 
    background-color:blue; 
    height:150px; 
    line-height:150px; 
    text-align:center; } 

JS FIDDLE

https://jsfiddle.net/aypye6g3/

IMAGE