Webview: Should a CSS Style for a body element work?

**HankFay** · 2020-07-05, 01:19

I have a CSS style defined in a webview, defined in the <style> section:

Code:

<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:

Code:

<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, 03:47

Hi hank,

see https://www.freecodecamp.org/news/ho...ng-text-align/

**HankFay** · 2020-07-05, 08: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, 13:00

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

Thread: Webview: Should a CSS Style for a body element work?

Thread Tools

Search Thread

Display

Webview: Should a CSS Style for a body element work?

Bookmarks

Bookmarks

Posting Permissions

Journey into the Cloud

Join us