Centered Text Group

1

I created a text box that expands and shrinks based on the browser width so I could have a responsive feel to the page. The problem is, when the text box shrinks or expands to a different width than the one created in the editor view, it becomes off-centered. I don’t want to check off the “100% height” option, as I would like to have more sections below it. Is there any hack to make the text box always be centered within a div/group? See file below:

Centered Text.hype.zip (40.9 KB)

2

It is definitely horizontally centered, but I'm not sure if you're talking about also getting the div vertically centered. Can you send a screenshot of what you're seeing and explain what you'd like to see?

3

Here’s a video demonstration:

Centered Text Video .mov (2.9 MB)

4 
<style>
h2{
color: #000;
padding: 8px;
font-family: Montserrat;
font-size: 24px;
line-height: 51px;
font-weight: normal;
text-align: center;
margin: 0
    }
h3{
color: #747474;
padding: 8px;
font-family: Poppins;
font-size: 16px;
line-height: 24px;
font-style: normal;
font-weight: 300;
text-align: center;
margin: 0;
border-style: solid;
border-width: 0;
border-bottom-width: 2px
}    
p{
color: #000;
padding: 8px;
font-family: Poppins;
font-size: 16px;
word-wrap: break-word;
font-weight: 300;
text-align: center
}
div .flexWrapper{
height: 100%;
display: flex;
align-items: center
}
div .contentWrapper{
margin:0;
padding: 0 5% 0 5%;
width:100%;
}
</style>

<div class="flexWrapper">
<div class="contentWrapper">
<h2>HEADING</h2>
<h3>This is a Subheading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

link (there are always other, better, optimized solutions …)

5

Thanks Hans! You the man!

6

Hello,

I would like to center vertically several texts <p...

<p...</p in the same block of text (name "example" on my document). Not in relation to the page, but in relation to the height of the text block, without playing on the line-height, and knowing that the differents paragraphs in the same bock must each have a different class.
I have tried several solutions without success.
Here is one of my test in attachment. How can I do this ? Thank you by advance for your help :slight_smile:

centertext vertically.hype.zip (28.4 KB)

7

Use !important in the css.

.example {
vertical-align:middle!important;;
display: table!important;
}

.example span{
vertical-align:middle!important;
display: table-cell!important;
}
3 Likes
8

Great !!! Thanks a lot :smiley: