Vertically centering text in HTML Frame Asset

Help from Community
1

Hello,
Let me say in advance that I’m not very versed in HTML and CSS. I am using an excel Interface Asset to drive the content of an experience and I need things like superscript text. This has led me to using the HTML Frame Asset. I’ve tried using p tags and H1 tags around my text in the excel, and then adding CSS to the HTML Frame Asset. I’ve been able to get most things to work like fonts, font color, horizontal centering, but vertical centering has just not worked for me. I see online that there are tons of methods, but none seem to work for me. I’m sure this is a fault of mine, but I’m hoping someone can give some guidance.

Let me give some example of what I’m doing…
Say I have this text in my excel “

This is my text to be centered vertically and horizontally

”
Then in my HTML Frame Asset I have the CSS as something like…
"H1 {
color: red;
font-family: Helvetica;
font-weight: Bold;
font-size: 20px;
text-align: center;
vertical-align: middle;
}
"
Most of those things work except the vertical align. Is there an easy way to accomplish this? Obviously it is a complicated system, but I’m just getting into HTML for this specific purpose.

Any help would be greatly appreciated and please ask any follow up questions.

Thanks! Tim

2

Hi @tlitostansky,

When using the vertical-align CSS property, it only works with inline, inline-block, or table-cell elements. To apply vertical alignment to an <h1> element, you can place it inside a flexbox or a div container. For more details, refer to this article on W3Schools: CSS Layout - Horizontal & Vertical Align.

Here is the altered code using this approach,

HTML:

<div class="center">
  <h1>I am vertically and horizontally centered.</h1>
</div>

CSS:

h1 {
  color: red;
  font-family: Helvetica;
   font-weight: bold;
   font-size: 20px;
   text-align: left;
    }
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

The result should be a centered h1 element both vertically and horizontally within the viewport.:

image
image968×786 12.1 KB

Let me know if this works for you.

Kind Regards

Louie

1 Like
3

Hi Louie,

That is working great! I appreciate the code and guidance.

Thanks!
Tim

1 Like