SOLVED Need to vertically center text in Custom HTML particle
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
I'm using Joomla 3.6, Gantry 5, and Hydrogen template.
Situation:
Showing at the top of my template in the same row, I have:
1. Left side -- Custom HTML particle with my logo text.
2. Right side -- Module position particle containing an swMenuPro module for my top menu, which is working as desired.
3. As I narrow the browser window, the top menu stacks, which is good.
Extra info: In the logo text, the font, itself, is responsive using the Flowtype.js technique . The responsive font is working nicely, and does not seem to be part of the problem (I think).
Problem:
As the top menu stacks, it creates increased height in the Custom HTML particle, and the logo text floats to the top instead of staying vertically centered. I would like to keep the logo text vertically centered if possible.
The Custom HTML particle div increases in height to match the top menu div, which is good.
The problem seems to be the g-content g-particle div, whose height does not increase because it stays sized to match the logo text.
Is there a way to vertically center g-content g-particle div, inside of the Custom HTML particle div? Or, is there another solution?
Thank you for suggestions. - Last Edit: 8 years 10 months ago by Pinto Buck.
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
I decided to put this issue on the back burner for a while, so I'm going to mark this as solved. Thx. If I need to address it again, I'll post a new question in a new thread.
For people that want a div or block to center vertically, I found a nice example at w3Schools which may be helpful.
www.w3schools.com/css/tryit.asp?filename=trycss_align_transform - Last Edit: 8 years 10 months ago by Pinto Buck.
-
Time to create page: 0.088 seconds