Vertically Center Elements

User 2660090 Photo


Registered User
88 posts

Hi guys, I'm trying to find the easiest way of vertically centring elements that are in a DIV. Now I know that using 'display: table' for the parent container and 'display: table-cell'/'vertical-align: middle' is meant to work, but I have been unable to implement this in the output files. I can't seem to find an easy way of achieving this properly in RLMP. I can use custom fixed margins but this obviously doesn't keep them vertically centered when the browser width is increased/reduced.

Here is an example: http://oi58.tinypic.com/2rdetzl.jpg. I would like the Excel image and the text to be vertically centered within that row. I've attached my index file if that helps, too.

Attachments:
User 10077 Photo


Senior Advisor
1,017 posts

Set the image Display to Block and set the Margin left and right to Auto. That will center the image. Make sure the image float is not left or right.

For text, just click the center button.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2660090 Photo


Registered User
88 posts

Brian Durfee wrote:
Set the image Display to Block and set the Margin left and right to Auto. That will center the image. Make sure the image float is not left or right.

For text, just click the center button.
I want to vertically center, not horizontally center the image and the div with text. The steps you've described are for centering horizontally.
User 2088758 Photo


Senior Advisor
2,700 posts

I would use top and bottom margin or padding and just adjust it at each breakpoint... unfortunately there is not % for these options like there is for horizontal.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
2,700 posts

Another thing you can try is adding a custom.css and manually code it to center vertically.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
18,329 posts
Online Now

http://zerosixthree.se/vertical-align-a … es-of-css/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
2,700 posts

Yep that will work! Haha that's what i was getting at. Thanks Eric.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2744602 Photo


Registered User
162 posts

Eric Rohloff wrote:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/


Outstanding thanks for this!

Cheers
KISS is the key!
Burgess Freelance Solutions
User 2660090 Photo


Registered User
88 posts

Thanks guys, but after experimenting a lot I've decided it is easier (for now) to just manually use the padding to get the elements roughly vertically centred. I used extra breakpoints to make sure that when the browser width was reduced the content would stay vertically centered. This is obviously not a very accurate method, but I tried some of the other methods, but it made things a little confusing for the other breakpoints. Too much content was rearranged at other browser widths, so I thought it wasn't worth the time and hassle. Hopefully this RSD app that's in the works will allow us to achieve this kind of thing a lot easier.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.