Centering hype_container vertically inside div

Hi everyone,

I am adding the hype_container into a bootstrap 4 like so:

<div class="tab-pane" id="tab2">
<!-- copy these lines to your document: -->            
<div id="press_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="press.hyperesources/press_hype_generated_script.js?41934">
</script>
</div>            
<!-- end copy -->
</div>

Can someone help me with centering the container vertically inside boostrap, please? I’ve read here and on stack and managed to confuse myself… pretty good…

Thanks in advance.

You’ll want to add

.tab-pane {
    text-align: center;
}

to your style sheet or you can target the specific ID

#tab2 {
    text-align: center;
}

1 Like

Thanks DBear… you seem to be everywhere :slight_smile:
I was trying to align the hype-container vertically in the center of my tab. Right now i’m centered (more or less) when an ipad is in landscape mode only.

I'm a ninja :crossed_swords:

If you're Hype document is flexible at all and pinned to the left or your document size is bigger than the available width of the device then these will effect how the document will look inside the tab. Just an FYI.

2 Likes