Center text in slanted section

Design help General
1

Good Morning,

I have a section that uses a bit of html to create a slant. I am trying to have my text positioned in the center of this section so that half of the text is on the white and the other half is on the gray, Like so…

27%20AM
27%20AM1590×486 8.65 KB

I tried a bunch of different things but have not found a solution as of yet. Here is my read link >> https://preview.webflow.com/preview/datta-solutions-2019?utm_medium=preview_link&utm_source=designer&utm_content=datta-solutions-2019&preview=594898e6a4aead9704d67b8e7bada037&pageId=5d31803b90eed3610ecaeae9&mode=preview

If anyone would be so kind as to explain to me where I am going wrong, I would greatly appreciate it.

Thanks
S

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Use flex box on paragraph

3

@java_I_tess

I’m not sure how using flex box will help. The problem is that the "zig zag’ Section is comprised of 2 polygons and written in html. If I add an element to the "zig zag’ Section the element goes either above or below the actual section. I need to figure out how to have the text in the center of the "zig zag’ section.

So far my code looks like this

<style>
svg.trapezoidal-horizintal{
  position: relative;
  bottom: -5px;
  width: 100%;
  height: 10vw;

}
</style>

<svg class="trapezoidal-horizintal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
preserveAspectRatio="none">
    <polygon fill="#f3f1f1" points="0,100 100,0 100,100"/>
</svg>
4

It’s different now but the last version I got it to work. This version I think the
z-index: -1 on the svg would help which should put it behind.

5

@java_I_tess

It’s back to the way it was before. Would you mind telling me how you got it to work?

6

Sure, I just added flex box to the paragraph and adjusted the margin I believe. (from what I remember) I only checked ion desktop so it would more than likely have to be adjusted somewhat on other sizes.