[英]How to vertically align banner in middle inside a wrapper
I need to vertically align the banner in middle based on the height of the container div. 我需要根据容器div的高度在中间垂直对齐横幅。 I tried but it is not aligning
我试过了但是没有对齐
<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>
Fiddle: http://fiddle.jshell.net/6w7dvbzd/ 小提琴: http : //fiddle.jshell.net/6w7dvbzd/
An option is applying display:table to container, and display:table-cell and vertical-align:middle to child, like so: 一个选项是将display:table应用于容器,将display:table-cell和vertical-align:middle应用于子对象,如下所示:
HTML: HTML:
<div class=wrapper>
<div class="content">Content</div>
</div>
CSS: CSS:
.wrapper {
display: table;
}
.wrapper .content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Updated JS Fiddle: 更新了JS Fiddle:
http://fiddle.jshell.net/6w7dvbzd/1/ http://fiddle.jshell.net/6w7dvbzd/1/
add to .wrapper a line-height and text-align like that : 向.wrapper添加这样的line-height和text-align:
the line-height based on wrapper height 基于包装器高度的行高
.wrapper {
width:200px;
margin:0 auto;
background-color:blue;
height:150px;
line-height:150px;
text-align:center; }
JS FIDDLE
JS菲德尔
https://jsfiddle.net/aypye6g3/ https://jsfiddle.net/aypye6g3/
IMAGE
图片
HTML: HTML:
<div class="wraper">
<img src=image src"/>
</div>
CSS: 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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.