centering content in a div vertically

This topic contains 4 replies, has 2 voices, and was last updated by  robertlo 6 years, 4 months ago.

Author Posts

robertlo

Sebastian,

I think I used to know this, but now I can’t seem to remember or figure it out. See the footer in http://www.lapolla.com/architects/

How in MT do I center all content vertically, so that the icons, text and button are all centered vertically?


Sebastian

Hi Robert, sorry for the delay in responding, I was away this weekend. The content in your footer seems to be centered. Did you find a workaround while you were waiting for me?

Cheers,
Sebastian


robertlo

No I did not. If you look closely you will see that the icons and the text to the right of them are not actually vertically centered. They appear to be but they are not actually centered. The degree to which they appear to be is simply coincidental.


Sebastian

Gotcha.

Vertically aligning elements in CSS is unexpectedly hard. I often have to remind myself of the rules when my first attempt fails. Please see our info page on the vertical-align property: https://themeover.com/vertical-align/ (and read the online tutorials at the bottom right, which contain more details information).

Hint: looking at your footer, I see that you have a number of container elements holding the elements you would like to align vertically. I suspect that you might need to set height to 100% on all of the containers, as well as setting display to inline on the actual elements you want to align vertically.

Have you read our CSS and Responsive design tutorial? It will help you understand CSS layout in general. And there is a section which explains the various considerations when setting display to inline/block here that might be useful: https://themeover.com/fancy-form-styling/#display-inline-block

The article mentions that “If floated left or right, inline elements behave like block elements“, which may be relevant to your ‘Lunch and Learn’ button that you are floating to the right. As vertical-align only applies when elements behave like inline elements: http://stackoverflow.com/questions/9430929/css-vertically-align-floating-divs

I hope that helps, please let me know if you need further assistance.

Cheers,
Sebastian


robertlo

Sebastian. Thanks so much for the info. I will look into all these.

You must login or register to reply to this topic.