Streaming live at 10am (PST)

Keeping column content aligned with each other

Keeping column content aligned with each other.

I have a 2 columns… column 1 has a map in it, and column 2 has a paragraph in it

I am trying to keep the center of the map in line with the center of the paragraph.

I have played with the margin for the map, and it always seems to shift when I go into preview mode.

Could someone tell me what I’m doing wrong? I’m sure there’s an easy solution, but I just don’t know it.


If you want to center element vertically, they need to be inside an element that HTML can calculate the height of. And in your case the parents elements cotaining the text and map get their size from their content and can’t be calculated by HTML. When you face this situation, you need some JS code to calculate height and center things.

But if you give a height to your column as I did here (I also coloured the bakground of columns for you to realize their new fixed height and the centering), you can center content element by setting it top 50% and transform move -50%

Here for the columns. I made the height huge for the demo:

It’s better centered when I remove all margins of your content elements:

If you want the signature to be centerd as well nest text and signature in a div and give the centering props to the div

Thanks @vincent! I got the paragraph center aligned, but the map is being stubborn… I tried to duplicate your instructions, but I’m missing something. could you point out my error?

You’re moving it up twice, trash one of the declarations.

ok. thanks for taking the time to look at it!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.