Printable View
I have a CSS style defined in a webview, defined in the <style> section:
And a <div that uses the style in the body:Code:<style>
.verticalhorizontal {
display: table-cell;
height: 300px;
text-align: center;
width: 300px;
vertical-align: middle;
}
</style>
The image loads (and twirls nicely) but the style settings have no effect.Code:<div class="verticalhorizontal"> <img src="loadDatalg.gif" alt="centered image" />
</div>
Clearly I'm missing something...
thanks,
Hank
Hi Barry,
Yes, all the horizontal center CSS methods I've tried work.
None of the vertical center methods I've tried work.
And my goal was to do both.
thanks,
Hank
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:
The top and bottom were left just for testing.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>
Hank