Vertically Center Elements - Post ID...
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.
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.
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.
For text, just click the center button.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
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.
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 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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
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.
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
It's easy to overlook something you're not looking for.
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
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Eric Rohloff wrote:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Outstanding thanks for this!
Cheers
KISS is the key!
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.