[英]Why does Google Chrome ignore “top” css property in a relatively-positioned element inside a flex-box?
[英]how to vertically center an image inside of a relatively-positioned container?
我想在下面的HTML中垂直居中圖像,使它垂直居中於它旁邊的div(“rtUpdateContentDiv”)。 img和div都在父容器“rtUpdateContainerDivActive”中。
<div class="rtUpdateContainerDivActive">
<img class="statusImg" src="images/icons/Knob-Valid-Green.png">
<div class="rtUpdateContentDiv">
<span class="rtBlueHighlight">date and time:</span>
ipsum lorem text here
</div>
</div>
這是目前為止的圖像的CSS:
.statusImg
{
position: absolute;
margin-top: auto;
margin-bottom: auto;
vertical-align: middle;
padding-left: 3px;
padding-top: 3px;
}
和容器:
.rtUpdateContainerDivActive
{
background-color: #90ee90;
margin-top: 1%;
position: relative;
min-height: 38px;
}
父母需要保持親戚關系。
如何垂直居中圖像(38px x 38px)?
感謝您的任何幫助!
解決方法1:
.parent{
display: inline-table;
height:100%;
}
.middleChild{
display: table-cell;
vertical-align: middle;
}
溶液2:
.statusImg
{
position: absolute;
height:38px;
top:50%;
margin-top:-19px;
}
希望它會有所幫助......
您可能希望閱讀此http://css-tricks.com/centering-in-the-unknown/ ,最后一種方法可能是您需要的方法。
使用top: 50%
用組合的margin-top
一半的圖像高度的: http://jsbin.com/adiseq/1/edit
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.