PDA

View Full Version : Webview: Should a CSS Style for a body element work?



HankFay
2020-07-05, 02:19
I have a CSS style defined in a webview, defined in the <style> section:


<style>
.verticalhorizontal {
display: table-cell;
height: 300px;
text-align: center;
width: 300px;
vertical-align: middle;
}
</style>

And a <div that uses the style in the body:


<div class="verticalhorizontal"> <img src="loadDatalg.gif" alt="centered image" />
</div>

The image loads (and twirls nicely) but the style settings have no effect.

Clearly I'm missing something...

thanks,

Hank

barrymavin
2020-07-05, 04:47
Hi hank,

see https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/

HankFay
2020-07-05, 09:16
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

HankFay
2020-07-05, 14:00
OK, so the code here almost works: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ when the class code from the linked github page is used: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/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:



... (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