イメージをモーダルで垂直にセンタリングする方法は？

Question

私は画像を表示するこのモーダルを持っています。私は携帯電話の画像を中央に（垂直に）、それを伸ばすことなく中央に配置したいが、それを達成することはできない。ここで

は（このモーダルを表示するJavaScriptを使用して）私のモーダルです：

var modal = document.getElementById('imgmodal'); 
 
var img = document.getElementById('picture'); 
 
var modalImg = document.getElementById("img"); 
 
var download = document.getElementById('download-link'); 
 

 
img.onclick = function(){ 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    download.href = this.src; 
 
} 
 

 
var span = document.getElementById("close"); 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
}

/* exam_img */ 
 
#imgmodal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    padding-top: 80px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; /* Full height */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    overflow: auto; 
 
    background-color: rgb(0,0,0); /* Black w/ opacity */ 
 
    transition: 0.3s; 
 
} 
 

 
/* Modal Content (image) */ 
 
.content { 
 
    margin: auto; 
 
    display: block; 
 
    height: 90%; 
 
} 
 

 
/* Add Animation */ 
 
.content, #caption {  
 
    -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 {transform:scale(0)} 
 
    to {transform:scale(1)} 
 
} 
 

 
/* 100% Image Width on Smaller Screens */ 
 
@media only screen and (max-width: 768px){ 
 
    .content { /* I want image to be vertically centered on smaller screens)*/ 
 
    width: 100%; 
 
    max-height: 90%; 
 
    height: auto; 
 
    } 
 
    #close { 
 
    top: 2px; 
 
    font-size: 40px; 
 
    } 
 
    #imgmodal { 
 
    padding-top: 50px; 
 
    } 
 
    #caption { 
 
    top: -1px; 
 
    } 
 
}

<li class="exam_li"> 
 
    <img id="picture" src="https://www.w3schools.com/css/img_fjords.jpg" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img"> 
 
</li> 
 

 
<div id="imgmodal"> 
 
    <div id="caption"> 
 
    <a id="download-link" download> 
 
     <span class="glyphicon glyphicon-download"></span> 
 
     <a id="download-link" download></a> 
 
    </div> 
 
    <span id="close">&times;</span> 
 
    <img class="content" id="img"> 
 
</div>

は、事前にありがとうございます！ここ 「ワーキング」コード：https://jsfiddle.net/dccLtfeh/

Answer 1

あなたは垂直 モバイルデバイス上で揃えるべき画像のCSSロジックを追加する必要があります。 トップとと

Postionがを変換ロジックを行います。 から画像を50％移動させ、次にtransform: translateY(-50%);の画像を垂直方向に正確に移動させると、top:50%と Postion:relativeが使用されます。ここ

@media only screen and (max-width: 768px) { 
    .content { 
    width: 100%; 
    height: auto; 
    position: relative; 
    top: calc(50% - 25px); 
    top: -moz-calc(50% - 25px); 
    top: -webkit-calc(50% - 25px); 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    } 
} 

モバイルデバイスでの作業コードcomaptibleあります。携帯端末でこれを確認してください。 https://jsfiddle.net/4ha9jyap/：

var modal = document.getElementById('imgmodal'); 
 
var img = document.getElementById('picture'); 
 
var modalImg = document.getElementById("img"); 
 
var download = document.getElementById('download-link'); 
 
img.onclick = function() { 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    download.href = this.src; 
 
} 
 
var span = document.getElementById("close"); 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
}

.exam-img:hover { 
 
    cursor: pointer; 
 
    transition: 0.2s; 
 
    overflow: hidden; 
 
} 
 

 

 
/* exam_img */ 
 

 
#imgmodal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    padding-top: 80px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* Full height */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    overflow: auto; 
 
    background-color: rgb(0, 0, 0); 
 
    /* Black w/ opacity */ 
 
    transition: 0.3s; 
 
} 
 

 

 
/* Modal Content (image) */ 
 

 
.content { 
 
    margin: auto; 
 
    display: block; 
 
    height: 90%; 
 
} 
 

 

 
/* Caption of Modal Image */ 
 

 
#caption { 
 
    text-align: center; 
 
    color: #ccc; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 35px; 
 
    font-size: 40px; 
 
    margin-top: 0; 
 
} 
 

 

 
/* Add Animation */ 
 

 
.content, 
 
#caption { 
 
    -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 { 
 
    transform: scale(0) 
 
    } 
 
    to { 
 
    transform: scale(1) 
 
    } 
 
} 
 

 

 
/* The Close Button */ 
 

 
#close { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: 100; 
 
    transition: 0.3s; 
 
} 
 

 
#close:hover, 
 
#close:focus { 
 
    color: #989898; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
#download-link { 
 
    font-size: 25px; 
 
    color: #f1f1f1; 
 
    font-weight: normal; 
 
    text-decoration: none; 
 
    transition: 0.2s; 
 
    padding: 10px; 
 
} 
 

 
#download-link:hover { 
 
    color: #989898; 
 
} 
 

 

 
/* 100% Image Width on Smaller Screens */ 
 

 
@media only screen and (max-width: 768px) { 
 
    .content { 
 
    width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
    top: calc(50% - 25px); 
 
    top: -moz-calc(50% - 25px); 
 
    top: -webkit-calc(50% - 25px); 
 
    transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    } 
 
    #close { 
 
    top: 2px; 
 
    font-size: 40px; 
 
    } 
 
    #imgmodal { 
 
    padding-top: 50px; 
 
    } 
 
    #caption { 
 
    top: -1px; 
 
    } 
 
    
 
    @-webkit-keyframes zoom { 
 
    from { 
 
    -webkit-transform: scale(0) translateY(-50%); 
 
    } 
 
    to { 
 
    -webkit-transform: scale(1) translateY(-50%); 
 
    } 
 
} 
 

 
@keyframes zoom { 
 
    from { 
 
    transform: scale(0) translateY(-50%); 
 
    } 
 
    to { 
 
    transform: scale(1) translateY(-50%); 
 
    } 
 
} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="exam_li"><img id="picture" src="https://www.w3schools.com/css/img_fjords.jpg" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img"></li> 
 

 
<div id="imgmodal"> 
 
    <div id="caption"><a id="download-link" download><span class="glyphicon glyphicon-download"></span><a id="download-link" download></a></div> 
 
    <span id="close">&times;</span> 
 
    <img class="content" id="img">