[英]Vertical align image in center div
我想在div的中心垂直對齊圖像。
為此,我使用以下代碼:
<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;">
<img class="cboxPhoto" src="" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img>
</div>
JSFiddle: http : //jsfiddle.net/3uk642wg/
我該如何實現?
div#cboxLoadedContent {
....
display: table-cell;
text-align: center;
vertical-align: middle;
}
jsfiddle- http://jsfiddle.net/3uk642wg/1/
div#cboxLoadedContent {border: 1px solid #333; display: inline-block;text-align: center; display: table-cell;vertical-align: middle;} .cboxPhoto {vertical-align: middle;}
<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;"> <img class="cboxPhoto" src="https://www.google.com//images/srpr/logo11w.png" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img> </div>
如果您正在現代瀏覽器上運行此程序,則可以嘗試一下。
div#cboxLoadedContent {
border: 1px solid #333;
display: inline-block;
text-align: center;
}
.cboxPhoto {
position: relative;
top: 50%;
transform: translateY(-50%);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.