jemand anders
Erfahrenes Mitglied
Hallo,
jemand eine Idee, wie ich modal-content im Beispiel vertikal mittig ausrichte?
Freundl. Grüße
jemand eine Idee, wie ich modal-content im Beispiel vertikal mittig ausrichte?
Freundl. Grüße
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal -->
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: block; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
___padding-top: 100px; /* Location of the box */
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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
___width: 80%; /* Breite nicht explizit angeben */
___max-width:60%;
display:table;
}
.table {
display:table;
border-spacing: 5px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #ccc;
padding: 5px;
}
</style>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="table">
<div class="row">
<div class="cell">asdf asdf asdf asdf</div>
<div class="cell">asdf asdf asdf asdf asdf asdf dasd </div>
<div class="cell">asdf asdf asdf asdf asdf </div>
</div>
<div class="row">
<div class="cell">asdf asdf asdf asdf asdf</div>
<div class="cell">asdf asdf asdf asdf asdf asdf</div>
<div class="cell">asdf asdf asdf asdf</div>
</div>
</div>
</div>
</div>
</body>
</html>
