[英]Unable to center modal image vertically
I'm working on this photo gallery where after clicking on the image thumbnail opens a modal to show the image in full size.我正在处理这个照片库,单击图像缩略图后会打开一个模式以显示全尺寸图像。
The modal works perfectly but the image doesn't show up in the center when the image is short in height.模态工作完美,但当图像高度较短时,图像不会显示在中心。 By center I mean vertically.
我所说的中心是垂直的。 Horizontally it is perfectly at the center.
从水平上看,它完全位于中心。
The modal code was taken from W3School's website and I changed the html and css a bit by removing the caption.模态代码取自W3School 的网站,我通过删除标题稍微更改了 html 和 css。
WHAT I TRIED:我试过的:
I tried centering the modal by adding the following code in .modal
class:我尝试通过在
.modal
类中添加以下代码来使模态居中:
top:50%;
left:50%;
transform:translate(-50%, -50%);
Also tried margin: 0 auto
.还尝试了
margin: 0 auto
。 But nothing seems to be working.但似乎没有任何效果。
Here's the working version of the modal with an image which is not centered vertically:这是模态的工作版本,其图像不垂直居中:
// Get the modal const modal = document.querySelector(".modal"); // Get the image and insert it inside the modal - use its "alt" text as a caption const img = document.querySelectorAll(".myImg"); const modalImg = document.querySelector(".img01"); img.forEach((item) => { item.onclick = function(e) { modal.style.display = "block"; modalImg.src = e.target.src; } }); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = 'none'; } }
.myImg { border-radius: 5px; cursor: pointer; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .myImg:hover { opacity: 0.7; } .modal { display: none; position: fixed; z-index: 999; padding-top: 35px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } /* Modal Content (image) */ .modal-content { margin: auto; display: block; } /* Add Animation */ .modal-content { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes zoom { from { -webkit-transform: scale(0); transform: scale(0) } to { -webkit-transform: scale(1); transform: scale(1) } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="myImg" src="https://lazykcamping.com/assets/Slide-3-Field.jpg" style="width:100%;max-width:500px"> <!-- The Modal --> <div class="modal"> <span class="close">×</span> <img class="modal-content img01"> </div>
How can I center it vertically?我怎样才能垂直居中?
add this to .modal-content
将此添加到
.modal-content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
This should center the modal image.这应该使模态图像居中。 Check in full screen view.
签入全屏视图。
Edit: one line JS, two line CSS.编辑:一行 JS,两行 CSS。 (rest is your code)
(其余的是你的代码)
// Get the modal const modal = document.querySelector(".modal"); // Get the image and insert it inside the modal - use its "alt" text as a caption const img = document.querySelectorAll(".myImg"); const modalImg = document.querySelector(".img01"); img.forEach((item) => { item.onclick = function(e) { modal.style.setProperty("display", "flex", "important"); modalImg.src = e.target.src; } }); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = 'none'; } }
.myImg { border-radius: 5px; cursor: pointer; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .myImg:hover { opacity: 0.7; } .modal { display: none; position: fixed; align-items: center; justify-content: center; z-index: 999; padding-top: 35px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .center-img{ display: flex; align-items: center; justify-content: center; } /* Modal Content (image) */ .modal-content { margin: auto; display: block; } /* Add Animation */ .modal-content { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes zoom { from { -webkit-transform: scale(0); transform: scale(0) } to { -webkit-transform: scale(1); transform: scale(1) } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="myImg" src="https://lazykcamping.com/assets/Slide-3-Field.jpg" style="width:100%;max-width:500px"> <!-- The Modal --> <div class="modal"> <span class="close">×</span> <img class="modal-content img01"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.