OK, so the code here almost works: https://philipwalton.github.io/solve...cal-centering/ when the class code from the linked github page is used: https://github.com/philipwalton/solv...ts/aligner.css
I made 3 changes.
width: 108vw; -- in order to get the image centered horizontally
height: 100vh -- In order to get the image centered vertically
body set to overflow: hidden; -- in order to deep the scrollbars from showing up (they were turned off in the page already.
Here's the code that worked:
Code:
... (boilerplate webview code above)
<style>
.Aligner {
display: flex;
align-items: center;
min-height: 24em;
justify-content: center;
height: 100vh;
width: 108vw;
}
.Aligner-item {
flex: 1;
}
.Aligner-item--top {
align-self: flex-start;
}
.Aligner-item--bottom {
align-self: flex-end;
}
.Aligner-item--fixed {
flex: none;
max-width: 50%;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<div class="Aligner">
<div class="Aligner-item Aligner-item--top"><p>top</p></div>
<div class="Aligner-item"><img src="loadDatalg.gif" alt="centered image" /></div>
<div class="Aligner-item Aligner-item--bottom"><p>bottom</p></div>
</div>
</body>
</html>
The top and bottom were left just for testing.
Hank
Bookmarks