Vertical Alignment using Skeleton Responsive Framework

Hi there,

I’m just putting together a site using the Skeleton responsive framework and cannot find a way to align content in one column so that it is vertically in the middle compared with the other column(s).

I’ve put together a quick demo to show what I mean (see attached) - please see that the placeholder image should ideally be vertically in the middle of the left-hand column compared with the paragraph text shown in the right-hand column.

vertical-alignment-demo.zip (7.2 KB)

I’d rather not resort to using JS for what seems to be a very simple problem, especially as I’ll be using this method across my site.

Cheers,

Andrew

HI,

Floats are removed from the flow and have no relationship with each other so you can’t match one with another.

Your left column is only as tall as its content so there is in fact nothing that the image can be vertically aligned with.

There are many hacks to do what you want but the simplest answer is to do it properly and get rid of the floats and use two elements of display:table-cell (wrapped in a display:table parent of 100% width) and then vertical alignment is easy as you can align content to the middle with vertical-align:middle.

Or for modern browsers you could use flexbox to do much the same.

You can’t do it with floats unless you resort to silly hacks so come out of the grid and use the proper html to achieve what you want.:slight_smile:

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