[英]How to vertically align banner in middle inside a wrapper
我需要根據容器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>
一個選項是將display:table應用於容器,將display:table-cell和vertical-align:middle應用於子對象,如下所示:
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 Fiddle:
向.wrapper添加這樣的line-height和text-align:
基於包裝器高度的行高
.wrapper {
width:200px;
margin:0 auto;
background-color:blue;
height:150px;
line-height:150px;
text-align:center; }
JS菲德爾
https://jsfiddle.net/aypye6g3/
圖片
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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.