Wie kann ich mein Modal zentrieren, wenn ich ein Bild hinzufüge?

Question

Es scheint Überstunden Ich füge ein Bild zu meinem modalen, es wird zentriert von der Benutzerseite.

Wenn ich off zentriert sage, ich meine das Modal wird mehr nach unten sein, während oben Platz übrig bleibt.

Ich habe eine JS Geige, so dass Sie für sich selbst (die Größe Ihres Browsers zu 1230x650, wenn Sie es nicht sehen können) sehen https://jsfiddle.net/2whfsnqe/

Bild des Problems:

Wie kann ich mein modales Zentrum korrekt, wenn ein Bild hinzugefügt wird?

Js Geige Code:

<button onclick='noImage()'> 
Open modal without image 
</button> 
<button onclick='withImage()'> 
Open modal with image 
</button> 

<div id="myModal" class="modal"> 
    <div id='modal-content' class="modal-content"> 
    <div id='modal-header' class="modal-header"> 
     <span id='close' class="close">&times;</span> 
     <h2 id='modal-title'><!--- modal-title to set data !---></h2>   
    </div> 
    <div class="modal-body" id="modal-body"><!--- modal-body to set data !---></div> 
    <div class="modal-footer" id="modal-footer"><!--- modal-footer to set data !---></div> 
    </div> 
</div> 
<script> 
var modal = document.getElementById('myModal'); 
var span = document.getElementsByClassName("close")[0]; 
function noImage(){ 
    setModalTitle("HELLO!"); 
    setModalBody("<p>This modal has no image - and is centered fine.</p>"); 
    openModal(); 
} 

function withImage(){ 
    setModalTitle("HELLO!"); 
    setModalBody("<p>This modal has a image, and isn't centered right :(</p><p>See how it goes off the page if you resize your browser to be smaller while leaving space on top?</p><img src='https://chart.googleapis.com/chart?chs=250x250&cht=qr&chl=3G58sN2JVX3tLBBDKfuUZ9q3fmG3nZ53iY '>"); 
    openModal(); 
} 

function openModal(){ 
    span.onclick = function() { 
     closeModal(); 
    } 
    window.onclick = function(event) { 
     if (event.target === modal) { 
      closeModal(); 
     } 
    } 
    modal.style.display = "block"; 
} 

function closeModal(){ 
    modal.style.display = "none"; 
    setModalBody(""); 
    setModalTitle(""); 
} 

function setModalTitle(text){ 
    document.getElementById("modal-title").innerHTML = text; 
} 

function setModalBody(html){ 
    document.getElementById("modal-body").innerHTML = html; 
} 
</script> 
/* modals */ 
/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    padding-top: 10%; 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content */ 
.modal-content { 
    position: relative; 
    background-color: #FFFFFF; 
    margin: auto; 
    padding: 0; 
    width: 80%; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
    -webkit-animation-name: animatetop; 
    -webkit-animation-duration: 0.4s; 
    animation-name: animatetop; 
    animation-duration: 0.4s; 
    text-align: center; 
} 

/* Add Animation */ 
@-webkit-keyframes animatetop { 
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1} 
} 

@keyframes animatetop { 
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1} 
} 

/* The Close Button */ 
.close { 
    color: #000; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    cursor: pointer; 
    opacity: 0.7; 
} 

.modal-header { 
    padding: 2px 16px; 
    background-color: #FFFFFF;; 
    color: black; 
} 

.modal-body {padding: 2px 16px;} 

.modal-footer { 
    padding: 2px 16px; 
    background-color: #FFFFFF; 
    color: black; 
} 

Answer 1

Der modale Behälter einen padding-top Wert von 10% aufweist, und da padding Prozentsatz auf der Breite des Behälters basieren (siehe here), ist es Erweiterung mit der Breite entlang.

Um es zu beheben, können Sie entweder die Auffüllung auf einen absoluten Wert ändern oder mithilfe von flexbox in der Mitte des Fensters ausrichten.