Menu icon Foundation
How to responsive central two element

I am a beginner, i try few hours to find a solution, but I can't solve it. The problem is that I can't center the two elements in one row (like in picture). I can add a some pixels at the top of the text, but with different proportions it looks bad, I need to this with rensponsive way.

1

I would like to make it look like the image below in each native resolution, does anyone know how to solve this problem? I would be very grateful

2

Responsivegridrow

I am a beginner, i try few hours to find a solution, but I can't solve it. The problem is that I can't center the two elements in one row (like in picture). I can add a some pixels at the top of the text, but with different proportions it looks bad, I need to this with rensponsive way.

1

I would like to make it look like the image below in each native resolution, does anyone know how to solve this problem? I would be very grateful

2
James Stone almost 2 years ago

If you can you can support flexbox with your project, then you should use the ZURB Foundation for Sites flexbox grid. Once you add this you can then set the .align-middle class on your row.

You can learn more about that in the official docs on flex grid.

If you cannot support flexbox (IE I am looking at you), then you are in for a bit of work.

The typical workaround is to set everything up to be tables and table cells to accommodate vertical centering. This is even more complicated if you need to center to the full height of the device as you will need to set the height of every inheriting object to 100% including body and html.

A quick search of how to center content vertically in divs will point you in the right direction.

If at all possible, I recommend the flexbox based solution.